2017-01-26 16 views
0

現在、私のブログは2つの水平セクションに分割されています。メインコンテンツと右側のサイドバー。メインブログコンテンツをどのようにセンターに置くことができますか?

サイドバーの幅を小さくしながら、私はそれを維持できるようにメインコンテンツを中心にしたいと思います。

どうすればいいですか?

私はmargin-left:16%.contentを追加しようとしましたが、これは間違ったやり方です。

デモで:https://www.moneynest.co.uk/how-to-choose-a-broker/

注:私はブートストラップを使用してカスタム起源をテーマにしたWordpressのを実行しているよ

マイ剥奪ページのコードは次のとおりです。

<html> 
<body class="post-template-default single single-post postid-594 single-format-standard logged-in admin-bar no-customize-support nolayout windows chrome override" itemscope itemtype="http://schema.org/WebPage"><div class="site-container"> 
<div class="site-inner">  
    <div class="content"> 
     <div id="container"> 
      <div class="central-container"> 
       <div class="middle-content"> 
       <div class="inner-post-head"> 
       </div> 
        <div class="data-content"> 
    <!--MAIN CONTENT HERE -->   
        </div><!-- End .middle-content --> 
    </div> 
     </div><!-- End #container --> 
    </div><!-- End #content --> 
    <aside class="sidebar sidebar-primary widget-area" role="complementary" aria-label="Primary Sidebar" itemscope itemtype="http://schema.org/WPSideBar" id="genesis-sidebar-primary"><h2 class="genesis-sidebar-title screen-reader-text">Primary Sidebar</h2><section id="text-9" class="widget widget_text"><div class="widget-wrap">   <div class="textwidget"> 
<!--SIDE BAR CONTENT HERE--></div> 
    <!--<div id="popular-articles"> 
    <p class="popular-articles-text">Popular articles</p> 
    </div>--> 
</div> 
</div> 
     </div> 
<section id="text-10" class="widget widget_text"><div class="widget-wrap" 
     </div></section> 
     </div> 
     </aside> 
<!--END OF SIDEBAR--!> 
<!--FOOTER STUFF--> 
     </body> 
</html> 
+1

ここに意味のあるコードと問題の説明を追加してください。修復が必要なサイト にリンクしないでください。そうしないと、 問題が解決されたり、リンク先のサイトにアクセスできない場合、この質問は将来の訪問者に価値を失います。 [最小、完全、および検証可能な例(MCVE)]を投稿すると()、より良い回答を得るのに役立ちます(http://stackoverflow.com/help/mcve)。詳細については、 [私のWebサイトの何かが動作しません。リンクを貼り付けることはできますか?](http://meta.stackexchange.com/questions/125997/) ありがとう! – j08691

+0

ありがとう!私は先に進み、上記のコードを追加しました。お役に立てれば。 すべてのクラスを追加したわけではありません。 –

答えて

3

あなたは、単に使用することができます.content divの中央に:

.content{ 
    margin:0 auto; 
} 

または

.content { 
    margin-left:auto; 
    margin-right:auto; 
} 

を "自動" 文はありませんトリック。 ;)

+0

ありがとう、私はこれらを追加しようとしましたが、動作していないようです。 .contentに適用される幅の2つのインスタンスがあることに気付きました。 1つは880ピクセル、もう1ピクセルは792ピクセルです。これらの両方を削除しても、あなたの提案に集中することはありません。何かアドバイス? –

0

ブラケットが紛失していないことを確認してください。コードにブラケットを追加しました(太字で表示)

</div> 
<section id="text-10" class="widget widget_text"><div class="widget-wrap"**>** 
     </div></section> 
     </div> 
     </aside> 
+0

ありがとう、これは私の一部の誤植でした。これはコード内に存在します。 –

関連する問題