Vertical alignment of text with CSS

Asked

Viewed 33,836 times

12

screenshot do texto desalinhado

How can I align this text "Adopt the rhythm of nature: her secret is patience", vertically and horizontally within the white field?

I used the following code:

<ul>
  <li>
     <a>
       adote o ritmo da natuza: o segredo dela é a paciência.
     </a>
     <h2>Ralph Waldo Emerson</h2>
  </li>
<li>

ul{
    position: relative;
    width: 100%;
    height: auto;
    list-style: none;
    margin: 0;
    padding: 0;
}
ul li{
    position: relative;
    width: 309px;
    height: 260px;
    background: #f3f2f1;
    float:left;
    margin: 0 19px 19px 0;

}
ul li  a{
    width: 257px;
    height: 170px;
    background: #fff;
    display: block;
    margin: 25px 0 0 25px;
    text-decoration: none;
    text-transform: uppercase;
    text-align:center;
    color: #f37021;
    font-family: Futura;
    font-size: 15px;
}
 ul li h2{
    font-family: Georgia;
    font-size: 14px;
    color: #111111;
    font-style: italic;
    text-align: center;
    margin: 0;
}
html css

  • I’m not sure if this is duplicate because your question is much more specific, but here’s a link to the minimum related: http://answall.com/questions/2817/better-forma-de-centralizar-um-element-vertical-horizontally

2 answers

9


1. Aligning the text in the middle of the cell

Create a div with the class vertical containing the text. Then use:

.vertical {
    vertical-align: middle;
    display: table-cell;
}

2. Rotating the Text

Create a div with the class vertical containing the text. Then use:

.vertical {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg); /* opcional: Opera agora usa -webkit */
  transform: rotate(-90deg);

  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%; /* opcional: Opera agora usa -webkit */
  transform-origin: 50% 50%;

  /* Use se você quer que apareça para o IE8. */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

  • Gypsy Morrison Mendez, actually what I need is to line up vertically and horizontally in the white space.

  • I expanded the response.

  • Has anyone asked in the meta what to do with prefixed properties? IMHO never use: who will copy our codes - and make sure they will - will use prefixes that will never be needed. Example? -o-.

  • -o- is Opera, right? I don’t know. I decided to put a complete CSS.

  • 1

    -ms-: Microsoft removed most of the prefixes. -o-: now Opera uses Webkit. I’ve talked about prefixfree but I recommend the self-prefix, even more for answers.

  • I edited putting your remarks. I will leave by trigger.

  • 1

    I tested your code in autoprefixer, in the default options: it left prefixes -ms- and -webkit-. Large part...

Show 2 more comments

0

Why not use line-height ?

ul li{
    position: relative;
    width: 309px;
    height: 260px;
    background: #f3f2f1;
    float:left;
    margin: 0 19px 19px 0;
    line-height: 260px;
}

Works well for me.

Sorry for the gaffe, I had not seen that the text has spacing and that had already tried the line-height.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.