Question

我目前正在使用PHP开发一个wordpress主题，但我的问题在于css。我有一个树div，我在父div中。父div是默认的100％，所以我想指定父div（类：＆＃34; single-general-sec1＆＃34;）。我试图计算父div应该有多宽，以便让它居中，但我的计算不起作用。请帮忙。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

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

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

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

1 个答案: