CSS 中的 div 居中（WP 主题开发和 PHP）答案

【问题标题】：Centering div in CSS (WP theme development and PHP)CSS 中的 div 居中（WP 主题开发和 PHP）
【发布时间】：2017-07-29 13:53:27
【问题描述】：

我目前正在使用 PHP 开发一个 wordpress 主题，但我的问题在于 css。我有树 div，我在父 div 中。父 div 默认为 100%，所以我想指定父 div（类：“single-general-sec1”）。我试图计算父 div 的宽度以便我将其居中，但我的计算不起作用。请帮忙。

根据我的计算，父 div 应该是：61% + 425px，但这不起作用。

.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%;
}

<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>

【问题讨论】：

标签： php html css wordpress

【解决方案1】：

您不能使用 % 值作为宽度使 div 居中。计算也是错误的：250px + 175px + 100px = 525px 所以，父 div 应该是 525px 以适应嵌套的 div。但是您应该首先规范化 HTML。或者只使用 bootstrap.css。

另一件事。对于一个 div 居中，您可以使用 display:inline-block 然后在他的父级上使用 text-align:center。

或者当你有固定宽度时，margin:50px auto;

【讨论】：