2017-07-29 3 views
-3

私は現在PHPでWordPressテーマを開発していますが、私の問題はCSSにあります。私はツリーdivを持っています。これは親divの中にあります。親divはデフォルトで100%ですので、親div(class: "single-general-sec1")を指定します。私はそれを中心にするために親divの幅を計算しようとしましたが、私の計算はうまくいかないのです。助けてください。CSS(WPテーマ開発とPHP)の中心div

親のdivは、私の計算では、61%+ 425pxであるべきですが、それはうまくいかないでしょう。

<div class="single-general-sec1"> 

<div class="single-btype-div"> 
<p class="single-gen-header"> - Typ av projekt </p> 
<p class="single-gen-desc"> <?php the_field('project-type'); ?> </p> 
</div> 

<div class="single-description-div"> 
<p class="single-gen-header"> - Beskrivning </p> 
<p class="single-description-desc"> <?php the_field('description'); ?> </p> 
</div> 

<div class="single-live-div"> 
<p class="single-gen-header"> - Se live </p> 
<a href="<?php the_field('page-url') ?>"><button class="single-live-button"> 
    Besök sida > </button></a> 
</div> 
</div> 

スタイリング:

.single-general-sec1 { 
margin-top: 150px; 
margin-bottom: 150px; 
height: auto; 
width: calc(61% + 425px); 
background-color: red; 
} 

.single-btype-div { 
width: 250px; 
display: inline-block; 
float: left; 
} 

.single-gen-header { 
font-size: 14px; 
color: #D9D9D9; 
font-family: "Roboto"; 
font-weight: 700; 
text-transform: uppercase; 
letter-spacing: 3px; 
margin: 0; 
width: auto; 
} 

.single-gen-desc { 
color: #000; 
font-family: "Roboto"; 
font-size: 28px; 
font-weight: 300; 
letter-spacing: 3px; 
margin: 0; 
width: auto; 
margin-top: 5px; 
} 

.single-description-div { 
width: 55%; 
display: inline-block; 
margin-left: 3%; 
float: left; 
} 

.single-description-desc { 
color: #000; 
font-family: "Roboto"; 
font-size: 20px; 
font-weight: 300; 
letter-spacing: 1px; 
margin: 0; 
width: auto; 
margin-top: 5px; 
} 

.single-live-button { 
margin-top: 5px; 
width: 175px; 
height: 40px; 
background-color: #8AA6B6; 
border-radius: 8px; 
border: none; 
color: #fff; 
font-size: 15px; 
font-family: "Roboto"; 
font-weight: 300; 
letter-spacing: 2px; 
text-transform: uppercase; 
} 

.single-live-div { 
    width: 100px; 
    display: inline-block; 
    margin-left: 3%; 
} 

答えて

0

あなたは幅の%値を使用してdiv要素をセンタリングすることはできません。また、250px + 175px + 100px = 525pxの計算では間違っています。入れ子divを収めるには、親divを525pxにする必要があります。しかし、HTMLを最初に正規化する必要があります。または単にbootstrap.cssを使用してください。

別のこと。 center divの場合、display:inline-blockを使用し、親のtext-align:centerを使用することができます。

また、幅が固定されている場合は、余白が50pxになります。