Pregunta css alineación vertical de línea simple o múltiple


Tengo un título que puede tener una o más líneas.

¿Cómo puedo alinear el texto verticalmente? Si siempre hubiera una línea, podría establecer la altura de la línea a la altura del contenedor.

Puedo hacerlo usando JavaScript, pero realmente no me gusta, estoy buscando una forma pura de CSS.

Además, si el contenedor pudiera expandirse con las líneas, sería perfecto, así que siempre puedo tener el mismo relleno en la parte superior e inferior.

enter image description here


75
2018-02-08 11:25


origen


Respuestas:


Para esto puedes usar display:table-cell propiedad:

.inline {
  display: inline-block;
  margin: 1em;
}
.wrap {
  display: table;
  height:  100px;
  width:   160px;
  padding: 10px;
  border:  thin solid darkgray;
}
.wrap p {
  display:        table-cell;
  vertical-align: middle;
}
<div class="inline">
  <div class="wrap">
    <p>Example of single line.</p>
  </div>
</div>

<div class="inline">
  <div class="wrap">
    <p>To look best, text should really be centered inside.</p>
  </div>
</div>

Pero funciona IE8 y superior. Lee este artículo para más información: Trucos de CSS: verticalmente centre el texto de líneas múltiples.


109
2018-02-08 11:38



Si no te gusta el display:table truco (sé que no) aquí hay una solución sin él:

.cen {
  min-height:5em; width:12em; background:red; margin:1em 0;
}
.cen p {
  display:inline-block; vertical-align:middle;
  margin:0 0 0 1em; width:10em;
}
.cen::after {
   display:inline-block; vertical-align:middle; line-height:5em;
   width:0; content:"\00A0"; overflow:hidden;
}

con HTML

<div class="cen">
 <p>Text in div 1</p>
</div>

Esto le da al div una altura de 5em, a menos que el contenido sea más alto, luego crece.
Ejemplo en vivo aquí.

Editar: Oh, ¿en qué navegadores se supone que debe funcionar? IE8 no cooperará.

(Editar más tarde: CSS actualizado para manejar problemas en Chrome)


9
2018-02-08 12:36



Realmente me gusta esta solución:

<div>
    <span style="display: inline-block; vertical-align: middle; height: --The height of your box here--"></span>
    <span style="display: inline-block; vertical-align: middle;">Put your multi-line content here</span>
</div>

Siéntase libre de usar hojas de estilo, y 100% para la altura ...

También podría tener que comentar espacios entre las etiquetas span, ya que estos son bloques en línea

El crédito va a infierno. Lo obtuve de aquí

<div style="outline:thin solid red;">
  <span style="display: inline-block; vertical-align: middle; height: 60px;"></span>
  <span style="display: inline-block; vertical-align: middle;">Put your multi-line content here.</span>
</div>

<div style="outline:thin solid red;">
  <span style="display: inline-block; vertical-align: middle; height: 60px;"></span>
  <span style="display: inline-block; vertical-align: middle;">Put your multi-line content here. Put your multi-line content here. Put your multi-line content here. Put your multi-line content here. Put your multi-line content here.</span>
</div>

Nota: Esto parece no funcionar con el contenido de línea múltiple.


9
2018-03-17 20:50



algo como esto

HTML

<div>
    <p>
       Lorem Ipsum is simply
    </p>
</div>

CSS

div {
   display: table;
}
p {
   display:table-cell;
   vertical-align: middle;
}

3
2018-02-08 11:38



Si desea que su texto sea receptivo, al envolver palabras de una a varias líneas a medida que el ancho cambia dinámicamente, se menciona el truco anterior con inline-block ayuda (que tienen la mejor compatibilidad aquí) puede no ser suficiente, ya que .inlinehelper puede empujar envolver texto debajo de sí mismo.
 Aquí hay una solución completa para esa tarea simpel:

HTML: 

<div id="responsive_wrap">
    <span class="inlinehelper"><span id="content">        
</div>

CSS:

#responsive_wrap {   
   display: block;    
   height: 100%; //dimensions just for   
   width: 100%;  //example's sake
   white-space: nowrap;
}

#content {   
   display: inline-block;        
   white-space: initial;
}

.inlinehelper {
   height: 100%;    
   width: 0;
   vertical-align: middle;
   display: inline-block;
}

darse cuenta el white-space:nowrap propiedad, que previene .inlinehelper y #content para envolver en relación el uno con el otro. white-space:initial en #content restablece la capacidad de envoltura para span sí mismo;

Otra opción: Más una cuestión de preferencia personal. Puede usar un pseudo elemento en lugar de .inlinehelper. Eliminar el .inlinehelper css rules and element y agrega este selector pseudo-element css:

#responsive_wrap:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 0px;
}

P.S .: Me di cuenta de que esta es una pregunta muy vieja y muy tarde, por lo tanto, deje que esta respuesta sea, tal vez sea útil para alguien.


2
2018-05-30 13:57



En cuanto al estilo, una mesa sería la mejor manera de diseñar su contenido (ponga las etiquetas de estilo en CSS):

<table style="border:1;collapse;width:300px;padding:5px;background-color:red;">
<tr>
    <td style="width:250px;vertical-align:middle;">Lorem ipsum dolor sit amet ipswum dolor</td>
    <td style="width:50px;vertical-align:top;color:white;">1 Line</td>
</tr>

El conteo de líneas requerirá un script JS, eche un vistazo aquí:

http://www.webdeveloper.com/forum/archive/index.php/t-44333.html


1
2018-02-08 11:38



Me gusta ese tipo de solución. Vi en algún lugar este truco en stackoverflow pero no recuerdo dónde exactamente. Muy usefel! :)

ul {
background: #000; 
  padding-left: 0;
}
ul li {
  height: 130px;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-bottom: 3px solid #F7F7F7;
}
ul li:last-of-type {
  border-bottom: none;
}
ul li:after {
  color: #333;
  position: absolute;
  right: 35px;
  font-size: 40px;
  content: ">";
  top: 50%;
  margin-top: -24px;
  color: #FFDA00;
  -webkit-transition: 0.25s all ease;
  transition: 0.25s all ease;
}
ul li a {
  font-size: 35px;
  font-family: Arial;
  color: #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-left: 40px;
  height: 100%;
  line-height: 38px;
  display: inline-block;
  width: 100%;
  text-align: left;
  text-decoration: none;
}
ul li a:before {
  display: inline-block;
  vertical-align: middle;
  content: " ";
  height: 100%;
}
ul li a span {
  display: inline-block;
  vertical-align: middle;
}
<ul>
	<li class="dn">
		<a href="kapec.ru.php"><span> Lorem ipsum 1 LINE</span></a>
		</li>
		<li>
			<a href="varianti.ru.php"><span>Lorem ipsum <br> 2 lines </span></a>
		</li>

	</ul>


0
2017-09-22 20:24