Ask for help, CSS multi-line fixed width text horizontal center problem

follow the video on youtube at the front end of the study. Today encountered a problem, the same code, the headline center took effect, but my fixed width multi-line text is not centered.

my CSS is as follows:

.content {

  padding: 2rem 0 6rem 0;
  .title, .sub_title {
      color: $white;
      text-align: center;
  }
  .title {
      font-weight: 400;
      font-size: 3rem;
      margin: 10 0 10 0;
  }
  .sub_title {
      font-weight: 300;
      font-size: 1rem;
      width: 600px;
      margin: 0 auto 2rem 0;
      line-height: 2rem;
  }

Design drawing effect

clipboard.png


Apr.02,2021

if you center a block element with the margin attribute, set margin-left and margin-left to auto;
with the abbreviations margin
margin:;
margin: up and down;
margin: up and down;
margin: top left and bottom right;


use developer tools to take a look at the true width of this container and the attributes of the parent container. Positioning is not determined by an attribute.


it is obvious that the container width of title is different from that of subTitle. SubTitle is limited to 600px in width, and the text is indeed centered in terms of this width (see the last line of text). You set the width of both title and subTitle to 100% and then look at it.


there is a simple, rude but stupid way to set the width of DOM, as many lines of text.

Menu