¿Cómo centrar alinear las imágenes dentro de Li? -- ss campo con alignment campo con html-lists campo con center camp Relacionados El problema

how to center align the images inside li?


0
vote

problema

Español

Perdón por mi pregunta tonta, ya que soy nuevo en Web Dev.

Tengo una envoltura de 880px y en el interior es el código a continuación. Estoy tratando de lograr que todos los elementos de LI se extiendan de manera equitativa horizontalmente dentro de 880px y tengan todo dentro de Li Element Center alineado. Intento evitar usar el margen de margen para difundirlos, ya que el último Li se supone que debe alinearse perfectamente a la derecha. Cuáles serían los mejores trucos de CSS para lograr esto. ¡Gracias por adelantado!

      <div id="services">         <ul>             <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block"/><p class="ser-tag">Title1</p><p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p></li>             <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block"/><p class="ser-tag">Title2</p><p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p></li>             <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block"/><p class="ser-tag">Title3</p><p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p></li>             <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block"/><p class="ser-tag">Title4</p><p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p></li>             <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block"/><p class="ser-tag">Title5</p><p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p></li>             <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block"/><p class="ser-tag">Title6</p><p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p></li>         </ul>     </div>   
Original en ingles

Sorry for my silly question as I am new to web dev.

I got a wrapper of 880px and inside that is the code below. i am trying to get all li elements equally spread horizontally within 880px and have everything inside li element center aligned. I try to avoid using margin-right to spread them, as the last li supposed to perfectly aligned to the right. What would be the best css tricks to achieve this. Thanks a ton in advance!

    <div id="services">         <ul>             <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block"/><p class="ser-tag">Title1</p><p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p></li>             <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block"/><p class="ser-tag">Title2</p><p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p></li>             <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block"/><p class="ser-tag">Title3</p><p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p></li>             <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block"/><p class="ser-tag">Title4</p><p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p></li>             <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block"/><p class="ser-tag">Title5</p><p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p></li>             <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block"/><p class="ser-tag">Title6</p><p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p></li>         </ul>     </div> 
           
   
   

Lista de respuestas

0
 
vote
vote
La mejor respuesta
 

Agregar track9 al LI's y render () { let myId = 10; return <MyComponent myID={myId} onPress={() => this._onItemPress(myId)} /> } 0 para centrarlos. Agregue ancho a cada elemento LI para que se extiendan. Agregue render () { let myId = 10; return <MyComponent myID={myId} onPress={() => this._onItemPress(myId)} /> } 1 a la envoltura para que los espacios en el HTML no tomen ningún espacio.

Ver Solución completa: http://codepen.io/shippin/pen/kwqgoj

 

Add display: inline block to the li's and text-align: center; to center them. Add width to each li element so they spread. Add font-size:0 to the wrapper so the spaces in the HTML do not take up any space.

See full solution: http://codepen.io/shippin/pen/KWQgoJ

 
 
0
 
vote

Especifique un render () { let myId = 10; return <MyComponent myID={myId} onPress={() => this._onItemPress(myId)} /> } 2 en el elemento 99887776623 y luego aplique un 99887776624 . Elementos de imagen render () { let myId = 10; return <MyComponent myID={myId} onPress={() => this._onItemPress(myId)} /> } 5 son en línea elementos para que no tenga que usar render () { let myId = 10; return <MyComponent myID={myId} onPress={() => this._onItemPress(myId)} /> } 6 para centrarlos.

  render () {     let myId = 10;     return <MyComponent myID={myId} onPress={() => this._onItemPress(myId)} /> } 7  
 

Specify a width on the <li> elements and then apply a text-align:center. Image elements <img> are inline elements so you don't have to use margin:auto; to center align them.

<li class="slide" style="position: absolute; display: none; width: 880px; text-align:center;"> 
 
 
0
 
vote

Los elementos render () { let myId = 10; return <MyComponent myID={myId} onPress={() => this._onItemPress(myId)} /> } 8 de forma predeterminada No se distribuyen en todo el ancho, por lo que debe aplicar un 100% de ancho para ellos y luego centrar sus contenidos usando render () { let myId = 10; return <MyComponent myID={myId} onPress={() => this._onItemPress(myId)} /> } 9 :

  this0   
  this1   
 

The li elements by default don't spread across the whole width, so you have to apply 100% width to them, and then center their contents using text-align: center;:

li {    width: 100%;    text-align: center;  }
<div id="services">    <ul>      <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block" />        <p class="ser-tag">Title1</p>        <p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p>      </li>      <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block" />        <p class="ser-tag">Title2</p>        <p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p>      </li>      <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block" />        <p class="ser-tag">Title3</p>        <p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p>      </li>      <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block" />        <p class="ser-tag">Title4</p>        <p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p>      </li>      <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block" />        <p class="ser-tag">Title5</p>        <p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p>      </li>      <li><img src="images/icon.png" width="104" height="84" alt="" style="display:block" />        <p class="ser-tag">Title6</p>        <p class="ser-subtag">subtag1<br>subtag2<br>subtag3</p>      </li>    </ul>  </div>
 
 
0
 
vote

Usted puede usar,

  this2  

Esto te ayudará por favor intentarlo.

 

you may use,

#services ul{    display: flex; } #services ul li {    flex-direction: column;    justify-content: center;    flex-grow: 1; } 

this will help you please try.

 
 

Relacionados problema

0  Mostrar imagen al azar con dimensiones variables utilizando jQuery  ( Display random image with varying dimensions using jquery ) 
Tengo una página simple que carga una imagen al azar de una matriz y la posiciona de forma centralizada con márgenes negativos en CSS. Esto funciona actualmen...

1  Cómo centrar el texto en el centro de la página  ( How to center text in the middle of the page ) 
¿Se pregunta cómo se puede fijar un texto rotado en el centro de la página? Aquí hay una jsfiddle , y espero que pueda lograr esto con Sólo CSS / HTML. ...

1  No se puede centrar un contenedor  ( Cant center a container ) 
Estoy tratando de centrar un contenedor y estoy usando Twitter Bootstrap 4 Aquí está el HTML <div class="container"> <div class="features"> ...

7  ¿Cómo centras un video usando CSS?  ( How do you center a video using css ) 
Estoy tratando de centrar un video dentro de mi sitio, pero no quiero usar las etiquetas del centro en HTML porque es un poco obsoleto. ¿Cómo hago esto con CS...

0  Solución de prueba de código abierto o libre [cerrado]  ( Open source or free testing solution ) 
cerrado. Esta pregunta no cumple con pautas de desbordamiento de pila . Actualmente no está aceptando respuestas. ...

12  Trucos de centrado CSS [CERRADO]  ( Css centering tricks ) 
Según lo que actualmente representa, esta pregunta no es un buen ajuste para nuestro Q & Amp; un formato. Esperamos que las...

30  Cómo encontrar las coordenadas del Centro X del elemento y la compensación de la ventana relacionada  ( How to find the elements x center coordinates and related window offset ) 
Me gustaría recuperar el compensado del elemento a partir de sus propias coordenadas X Center. ¿Cómo puedo hacerlo? En realidad, puedo encontrar la ventan...

7  Alinee la celda en el centro (horizontalmente) en UicollectorView  ( Align cell in centerhorizontally in uicollectionview ) 
Soy la primera vez que trabaja con UicollectView, no estoy seguro de cómo hacer esto. Estoy tratando de crear una aplicación para TVOS y desea mostrar el menú...

5  Imagen del centro vertical y horizontalmente dentro de DIV con flotador: ¡izquierda?  ( Center image vertically and horizontally inside of div with floatleft ) 
Necesito una solución de trabajo para hacer una tarea de trivalidad de centrar las imágenes con diferentes dimensiones, a un DIV cuadrado cuando flotan: a la ...

16  Botón Android Coloque la imagen en el centro y el texto en la parte inferior  ( Android button place image in center and text at bottom ) 
Quiero colocar la imagen en el centro y el texto justo debajo de él en un botón, intenté configurar Android: Gravity, pero no pudo configurarlo correctamente,...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos