Question

我想在其中一个div中添加多个文本，第二行不应该是第一行的粗体，但它是，并且文本必须在div的中心垂直对齐。

.divProp {
  text-align: center;
  vertical-align: middle;
  line-height: 90px;
  border-color: #CCCCCC;
  border-width: thin;
  height: 90px;
  background-color: lightblue;
  padding: 15px;
  min-width: 100px;
  word-wrap: break-word;
}

.divProp>p {
  color: black;
  font-weight: bold;
  font-size: 13px;
}

.noneBold {
  font-weight: normal;
}

<table>
  <tr>
    <td>
      <div class="divProp">
        <p>DIV 1</p>
      </div>
    </td>
    <td></td>
    <td>
      <div class="divProp">
        <p>DIV 2</p>
      </div>
    </td>
    <td></td>
    <td>
      <div class="divProp">
        <p>LONG TEXT DIV 3</p>
        <p class="noneBold">Sub Div 3</p>
      </div>
    </td>
    <td></td>
    <td>
      <div class="divProp">
        <p>DIV 4</p>
      </div>
    </td>
    <td></td>
    <td>
      <div class="divProp">
        <p>DIV 5</p>
      </div>
    </td>
  </tr>
</table>

Sub Div 3 在div之外，但它应该是 Div 3

下的第二行

2 个答案:

答案 0 :(得分：1)

答案 1 :(得分：1)

Answer 1

正如@HunterTurner的评论中所述，您的line-height导致每个新行分开90px。如果您希望在文本周围添加空格，我会使用padding代替，因为这不会影响每一行，但会影响行所包含的元素。

编辑：阅读完评论后，我将css更新为水平和垂直居中。我使用了flexboxes，如果你想了解更多关于flexboxes功能的信息，我会看here。

.divProp {
  text-align: center;
  vertical-align: middle;
  padding: 90px; /* Using padding instead */
  border-color: #CCCCCC;
  border-width: thin;
  height: 90px;
  background-color: lightblue;
  padding: 15px;
  min-width: 100px;
  word-wrap: break-word;

  /* Center Vertically */
  display: flex;
  align-items: center;
}

.divProp p {
  color: black;
  font-weight: bold;
  font-size: 13px;
  margin: auto; /* Center horizontally */
}

.noneBold {
  font-weight: normal;
}

<table>
  <tr>
    <td>
      <div class="divProp">
        <p>DIV 1</p>
      </div>
    </td>
    <td></td>
    <td>
      <div class="divProp">
        <p>DIV 2</p>
      </div>
    </td>
    <td></td>
    <td>
      <div class="divProp">
        <div>
          <p>LONG TEXT DIV 3</p>
          <p class="noneBold">Sub Div 3</p>
        </div>
      </div>
    </td>
    <td></td>
    <td>
      <div class="divProp">
        <p>DIV 4</p>
      </div>
    </td>
    <td></td>
    <td>
      <div class="divProp">
        <p>DIV 5</p>

      </div>
    </td>
  </tr>
</table>

Answer 2

关于粗体问题，$user->questions()->saveMany(factory(App\Question::class, 10)->make())->each(function($question) { // With dummy tags $question->tags()->sync(factory(App\Tag::class, 5)->make()); });比.divProp > p更具体，因此第一个会覆盖第二个。

您可以找到另一种方法来定位默认情况，或者只是为.noneBold声明添加额外的特异性：

.noneBold

＆＃13;

.divProp > p.noneBold {
    font-weight: normal; /* will apply */
}

＆＃13;

.divProp {
  text-align: center;
  vertical-align: middle;
  border-color: #CCCCCC;
  border-width: thin;
  height: 90px;
  background-color: lightblue;
  padding: 15px;
  min-width: 100px;
  word-wrap: break-word;
}

.divProp>p {
  color: black;
  font-weight: bold;
  font-size: 13px;
}

.divProp>p.noneBold {
  font-weight: normal;
}

＆＃13;

无法在一个div中添加多行不同的字体

2 个答案: