Vertical text alignment with CSS

Question

Vertical text alignment with CSS

Navigation

#1 by (8 votes)
#2 by (0 votes)

10

HowcanIalignthistext"Adopt the rhythm of nature: its 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

asked by anonymous 07.03.2014 / 22:03

2 answers

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

For me it works well.

Excuse me for the gaffe, I had not seen the text have spacing and I had already tried line-height .

11.07.2015 / 18:43

When is the controller necessary? Basic image editing using OpenCV

score 8 · Accepted Answer

1. Aligning text in the middle of the cell

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

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

2. Rotating the Text

Create a div with 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);
}