居中div在CSS（WP主题开发和PHP）

Question

我目前正在用PHP开发一个WordPress主题，但我的问题是与CSS。我有树div，我有一个父div。父母div默认为100％，所以我想指定父div（class：“single-general-sec1”）。我试图计算父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%; 
} 

Answer 1

可以使用％值宽度不居中一个div。此外，计算是错误的：250px + 175px + 100px = 525px因此，为了适应嵌套div，父div应该是525px。但是你应该首先对HTML进行标准化。或者只使用bootstrap.css。

另一件事。对于中心div你可以使用display：inline-block，然后在他的父级使用text-align：center。

或者当你有一个固定的宽度，margin：50px auto;