CODEWITHSUNDEEP
htmlcss
Maro
Maro

Reputation: 2629

Can't add multiple lines with different font sizes in one div

I would like to add multi text in one of the divs, the second line should not be bold as the first, but it is, and texts must be aligned vertically in the center of the 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 is outside the div but it should be second line under Div 3

enter image description here

Upvotes: 0

Views: 569

Answers (2)

David Lee
David Lee

Reputation: 2100

As stated in the comments by @HunterTurner, your line-height is causing each new line to be 90px apart. If you wish to add space around your text I would use padding instead as this does not affect each line but the element the lines are contained in.

EDIT: After reading your comment I updated the css to center both horizontally and vertically. I used flexboxes for this, if you wish to learn more about the power of flexboxes I would look 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>

Upvotes: 1

S&#233;bastien
S&#233;bastien

Reputation: 12139

Regarding the bold problem, .divProp > p is more specific than .noneBold and so the first overrides the second.

You can either find another way to target the default case, or simply add extra specificity to the .noneBold declaration:

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


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

Upvotes: 1

Related Questions