Html Question posted in
Some basic documentation can be found here.

Html – How to text perfectly center align with quotes

The center align property doesn’t take double quotes in consideration when aligning text, so with quotes text center alignment doesn’t look good. It is off, because the quotes are in the alignment. The human eye focuses on the text itself. So this text should be aligned and the quotes should be left and right of this text.

The text is dynamic in content and size. Is there anyway I could make it look good? It should run on Chrome.

I tried using The CSS selector hanging-punctuation: first last, but that doesn’t solve the problem. I also tried text-indent: -3em but that’s not a solution for centered text.

#container {
  width: 400px;
  height: 300px;
  font-family: Arial;
  background: lightblue;
}

#container>div {
  margin-top: 40px;
  text-align: center;
  font-size: 30px;
}

#container>div:first-child {
  color: green;
}

#container>div:last-child {
  color: red;
}
<div id="container">
  <div>
    This alignment<br>looks good to the eye
  </div>
  <div>
    "This alignment does<br>not look so good to the eye"
  </div>
</div>
Tags:

2

Answers


  1. 0

    Set margin-left:-1em to the text?

    #container {
  width: 400px;
  height: 300px;
  font-family: Arial;
  background: lightblue;
}

#container>div {
  margin-top: 40px;
  text-align: center;
  font-size: 30px;
}

#container>div:first-child {
  color: green;
}

#container>div:last-child {
  color: red;
}

#container>div:last-child>span {
  margin-left:-1em;
}
    <div id="container">
  <div>
    This alignment<br>looks good to the eye
  </div>
  <div>
    <span>"This alignment does<br>not look so good to the eye"</span>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    You can use before and after pseudo elements to create the quotation marks.

    Positioned absolute their width will not be part of the alignment calculations.

    #container {
  width: 400px;
  height: 300px;
  font-family: Arial;
  background: lightblue;
}

#container>div {
  margin-top: 40px;
  text-align: center;
  font-size: 30px;
}

#container>div:first-child {
  color: green;
}

#container>div:last-child {
  color: red;
  position: relative;
}

#container>div:first-child::before {
  content: '"';
  position: absolute;
  transform: translateX(-100%);
}

#container>div:first-child::after {
  content: '"';
  position: absolute;
  rtransform: translateX(-100%);
}
    <div id="container">
  <div>
    This alignment<br>looks good to the eye
  </div>
  <div>
    This alignment<br>looks good to the eye
  </div>
  <div>
    "This alignment does<br>not look so good to the eye"
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search