html - I need to center 3 <div> on the webpage -
i need fix 3 <div>s in center of webpage. tried use margin: 0 auto; doesn't work, using bootstrap's grid. it's complicated because whatever i'll 3 <div>s don't fix in middle. goes 3 buttons, , every button has paragraph below.
<section class="contenedor"> <nav> <ul><div class="contenedor"> <li class="col-md-3"><a href="#"><img src="imagenes/icono-1.png" alt="responsive" class="center-block"></a> <p class="boton-textt"> responsive</p> <p class="boton-textt">web design</p> <p class="boton-text col-md-12 "> create scalable internet services. architecture of content , presentation adapted screen size , device type. create responsive web design. </p></li> <li class="boton2 col-md-3"><a href="#"><img src="imagenes/icono-2.png" alt="mobile" class="center-block"></a> <p class="boton-textt"> mobile</p> <p class="boton-textt">applications </p> <p class="boton-text col-md-12"> design user interfaces of mobile applications. know iphone users' needs metro system's requirements. developers respect quality , organization of our work, clients love it. </p></li> <li class="boton3 col-md-3"><a href="#"><img src="imagenes/icono-3.png" alt="web" class="center-block"></a> <p class="boton-textt"> web</p> <p class="boton-textt">applications </p> <p class="boton-text col-md-12"> building ui web applications. understand both: strength of trends , technology constraints. @ end of day user still important. </p></li> </div> </ul> </nav> </section>
1. mark wrong
you wrapped lis div.contenedor not standard practice. please remove it.
2. need better understand bootstrap's grid system.
it's divided 12 basically. if want put 3 items on row , want them well-aligned horizontally, need use col-**-4, not -3 there.
reading http://getbootstrap.com/css/#grid understand better.
i editted of code here - http://jsfiddle.net/fktkeu9r/
Comments
Post a Comment