Skip to main content
Pergunta fechada como "Duplicada" por Largato
realce de sintaxe no css
Fonte Link
bfavaretto
  • 66,2mil
  • 11
  • 151
  • 228

Alinhamento vertical de texto com cssCSS

inserir a descrição da imagem aquiscreenshot do texto desalinhado

Como posso alinhar esse texto "Adote o ritmo da natureza: o segredo dela é a paciência", verticalmente e horizontalmente dentro do campo branco?

useiUsei o seguinte código:

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

Alinhamento vertical com css

inserir a descrição da imagem aqui

Como posso alinhar esse texto "Adote o ritmo da natureza: o segredo dela é a paciência", verticalmente e horizontalmente dentro do campo branco?

usei o seguinte código:

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

Alinhamento vertical de texto com CSS

screenshot do texto desalinhado

Como posso alinhar esse texto "Adote o ritmo da natureza: o segredo dela é a paciência", verticalmente e horizontalmente dentro do campo branco?

Usei o seguinte código:

<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;
}
added 18 characters in body
Fonte Link
Leandro Costa
  • 2,2mil
  • 6
  • 26
  • 38

inserir a descrição da imagem aqui

Como posso alinhar esse texto "Adote o ritmo da natureza: o segredo dela é a paciência", verticalmente e horizontalmente dentro do campo branco?

usei o seguinte código:

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

inserir a descrição da imagem aqui

Como posso alinhar esse texto "Adote o ritmo da natureza: o segredo dela é a paciência", verticalmente dentro do campo branco?

usei o seguinte código:

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

inserir a descrição da imagem aqui

Como posso alinhar esse texto "Adote o ritmo da natureza: o segredo dela é a paciência", verticalmente e horizontalmente dentro do campo branco?

usei o seguinte código:

<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;
}
Fonte Link
Leandro Costa
  • 2,2mil
  • 6
  • 26
  • 38

Alinhamento vertical com css

inserir a descrição da imagem aqui

Como posso alinhar esse texto "Adote o ritmo da natureza: o segredo dela é a paciência", verticalmente dentro do campo branco?

usei o seguinte código:

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