如何使用HTML和CSS正确对齐图像（带有文本）？

Question

I'm trying to set up a website where I intend to have some responsive features which allow it to be functional even with smartphones, tablets, etc.

I'll share the relevant code so it's easier to get to the point:

HTML

    /* First Problem - Images won't be in the centre of the screen (they tend to the right side) */
    <ul class="slices">
        <li><img src="Content/Media/home_img_part1.jpg" /></li>
        <li><img src="Content/Media/home_img_part2.jpg" /></li>
        <li><img src="Content/Media/home_img_part3.jpg" /></li>
        <li><img src="Content/Media/home_img_part4.jpg" /></li>
    </ul>

    /* Second Problem - Text doesn't keep in the same line as the *img* element */
    <article>
        <img src="https://static.wixstatic.com/media/64fcdd_d2442874c5254a63b4d5f721967b88e2.png/v1/fill/w_47,h_40,al_c,usm_0.66_1.00_0.01/64fcdd_d2442874c5254a63b4d5f721967b88e2.png" />
        <h4>"Aquilo que os nosso clientes de facto querem não é apenas o conhecimento, mas a certeza de que o sabemos aplicar"</h4>
        <p><h4 class="bold">NC TI Consultant  - DNR</h4></p>
    </article>
    <article>
        <img src="https://static.wixstatic.com/media/64fcdd_d2442874c5254a63b4d5f721967b88e2.png/v1/fill/w_47,h_40,al_c,usm_0.66_1.00_0.01/64fcdd_d2442874c5254a63b4d5f721967b88e2.png" />
        <h4>"A DNR é uma equipa jovem e dinâmica, sempre pronta a apresentar novas soluções e estratégias que nos facilitam o  processo de trabalho. Tornando-o ágil e produtivo A nossa relação baseia-se  sobretudo numa grande transparência e ajuda mútua."</h4>
        <p><h4 class="bold">Engº Ricardo Cabral - Totallink</h4></p>
    </article>

CSS

    img {
        text-align: center;
        max-width: 100%;
        height: auto;
        width: auto;
    }

    nav ul li {
        display: inline-block;
        float: left;
        padding: 10px;
    }

    ul.slices li {
        display: inline-block;
        float: left;
        text-align: center;
        margin: 40px 0 0 10px;
    }

    article {
        float: left;
        margin: 0 auto;
        width: 42%;
        height: auto;
        padding: 4%;
        text-align: justify;
    }

Right now, I've got 2 problems:

1. The 4 images in the ul.slices li don't align horizontally in the centre of the browser
2. On each article, the img elements and the corresponding text won't align horizontally

Should I solve this by adding something like div elements or is my CSS incorrect?

Thanks in advance,
Granvic

 * { margin: 0; border: 0; padding: 0; } body { background: #f0f0f0; font: 14px/20px Calibri; color: #555; margin: 0; } p { padding: 1%; } img { text-align: center; max-width: 100%; height: auto; width: auto; } a { color: #000; text-decoration: none; } a:hover { color: #000; font-weight: bold; } header { background-color: #FFF; width: 100%; height: 150px; /*position: fixed;*/ top: 0; left: 0; z-index: 100; opacity: 0.90; } #logo { margin: 10px; float: left; width: 220px; height: 140px; background: url(https://static.wixstatic.com/media/64fcdd_b1431dbdfce24a69864ca9c381d36c5a.png/v1/fill/w_353,h_218,al_c,usm_0.66_1.00_0.01/64fcdd_b1431dbdfce24a69864ca9c381d36c5a.png) no-repeat center; } nav { float: right; padding: 90px 20px 20px 0; } #menu-icon { /*visibility: hidden;*/ display: none; width: 40px; height: 40px; background: url(http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/matte-grey-square-icons-media/119425-matte-grey-square-icon-media-media2-arrow-down.png) center; background-size: cover; } a:hover#menu-icon { border-radius: 4px 4px 0 0; } ul { list-style: none; } nav ul li { display: inline-block; float: left; padding: 10px; } .current { color: red; text-decoration: underline; font-weight: bolder; } /* TREAT THIS */ ul.slices li { display: inline-block; float: left; text-align: center; margin: 40px 0 0 10px; } .clear { clear: both; } section { width: 46%; float: left; margin: 2% 2%; text-align: center; } article { float: left; margin: 0 auto; width: 42%; height: auto; padding: 4%; text-align: justify; } article h4 { font-weight: normal; font-style: italic; } article h4.bold { float: right; font-weight: bold; font-style: italic; } footer { background: #f0f0f0; width: 100%; overflow: hidden; opacity: 0.90; } footer p, footer h3 { color: #000; } footer pa { color: #000; text-decoration: none; } ul.social li { display: inline; } ul.social li img { height: 30px; } /*------------------------------- MEDIA -------------------------------*/ @media screen and (max-width: 478px) { body { position: absolute; } } @media screen and (max-width: 740px) { header { position: absolute; } #menu-icon { display: inline-block; } nav ul, nav:active ul { display: none; position: absolute; padding: 20px; background: #f0f0f0; border: 1px solid #FFF; right: 20px; top: 60px; width: 50%; border-radius: 2px 0 2px 2px; } nav li { text-align: center; width: 100%; padding: 10px 0; margin: 0; } nav:hover ul { display: block; } section { float: left; width: 100%; margin: 0; padding: 0; } article { float: left; width: 100%; margin: 0; padding: 0; } } 

 <!DOCTYPE html> <html> <head> <title>DNR Improving Solutions</title> <meta charset="utf-8" /> <meta name="viewport" content="width=divice-width, initial-scale=1.0" /> <style type="text/css"> </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> </head> <body> <header> <a href="#" id="logo"></a> <nav> <a href="#" id="menu-icon"></a> <ul> <li><a href="#" class="current">Início</a></li> <li><a href="#">DNR</a></li> <li><a href="#">PHC</a></li> <li><a href="#">Soluções</a></li> <li><a href="#">Notícias</a></li> <li><a href="#">Loja e Carrinho</a></li> <li><a href="#">Contacto</a></li> </ul> </nav> </header> <ul class="slices"> <li><img src="Content/Media/home_img_part1.jpg" /></li> <li><img src="Content/Media/home_img_part2.jpg" /></li> <li><img src="Content/Media/home_img_part3.jpg" /></li> <li><img src="Content/Media/home_img_part4.jpg" /></li> </ul> <div class="clear"></div> <article> <img src="Content/Media/double_right_arrow.png" /> <h4>"Aquilo que os nosso clientes de facto querem não é apenas o conhecimento, mas a certeza de que o sabemos aplicar"</h4> <p><h4 class="bold">NC TI Consultant - DNR</h4></p> </article> <article> <img src="Content/Media/double_right_arrow.png" /> <h4>"A DNR é uma equipa jovem e dinâmica, sempre pronta a apresentar novas soluções e estratégias que nos facilitam o processo de trabalho. Tornando-o ágil e produtivo A nossa relação baseia-se sobretudo numa grande transparência e ajuda mútua."</h4> <p><h4 class="bold">Engº Ricardo Cabral - Totallink</h4></p> </article> <footer> <section> <img src="Content/Media/dnr_footer_logo.png" /> <h5>&copy;2016 DNRwebdesign</h5> </section> <section> <h3>Newsletter DNR</h3> <input type="text" id="email" placeholder="Email" /> <p><button id="submit">Assine Agora</button></p> <ul class="social"> <li><a href="http://www.dnris.com/feed.xml" target="_self"><img src="Content/Media/rss_feed_logo.png" /></a></li> <li><a href="https://www.facebook.com/pages/DNR/406091066242029?view_public_for=406091066242029" target="_blank"><img src="Content/Media/facebook_logo.png" /></a></li> <li><a href="https://twitter.com/dnrimprovingsol" target="_blank"><img src="Content/Media/twitter_logo.png" /></a></li> <li><a href="https://plus.google.com/u/0/117524251491512615717/posts" target="_blank"><img src="Content/Media/google_plus_logo.png" /></a></li> </ul> <p>DNR - Todos os direitos reservados</p> </section> </footer> </body> </html> 

Answer 1

1. You should remove the margin to the bottom for the logo because that makes the whole ul move to the right since the logo is too high. Then you should also remove the floating for the ul.slices li elements since you display them as inline-blocks and therefore no float is required. Also add text-align:center to the ul surrounding your four images. Once you have done that the four images will be centered.

2. Simply add text-align:center to the articles and add text-align:justify to the h4 elements.

Please click on "Full Page" below to see the changes I made (resize window until > 740px).

PS: to make the four images not move behind the header on small devices you would need to either give a padding to the body or set the header back to position:relative inside your media queries.

 * { margin: 0; border: 0; padding: 0; } body { background: #f0f0f0; font: 14px/20px Calibri; color: #555; margin: 0; } p { padding: 1%; } img { text-align: center; max-width: 100%; height: auto; width: auto; } a { color: #000; text-decoration: none; } a:hover { color: #000; font-weight: bold; } header { background-color: #FFF; width: 100%; height: 150px; /*position: fixed;*/ top: 0; left: 0; z-index: 100; opacity: 0.90; } #logo { margin-right: 10px; float: left; width: 220px; height: 140px; background: url(https://static.wixstatic.com/media/64fcdd_b1431dbdfce24a69864ca9c381d36c5a.png/v1/fill/w_353,h_218,al_c,usm_0.66_1.00_0.01/64fcdd_b1431dbdfce24a69864ca9c381d36c5a.png) no-repeat center; } nav { float: right; padding: 90px 20px 20px 0; } #menu-icon { /*visibility: hidden;*/ display: none; width: 40px; height: 40px; background: url("http://icons.iconarchive.com/icons/graphicloads/100-flat/128/settings-icon.png") center; background-size: cover; } a:hover#menu-icon { border-radius: 4px 4px 0 0; } ul { list-style: none; } nav ul li { display: inline-block; padding: 10px; } .current { color: red; text-decoration: underline; font-weight: bolder; } /* TREAT THIS */ ul.slices { text-align: center; } ul.slices li { display: inline-block; margin: 40px 0 0 10px; } .clear { clear: both; } section { width: 46%; float: left; margin: 2% 2%; text-align: center; } article { float: left; margin: 55px auto; width: 42%; height: auto; padding: 4%; text-align: center; } article h4 { font-weight: normal; font-style: italic; text-align:justify; } article img { float:left; margin-right:15px; } article h4.bold { float: right; font-weight: bold; font-style: italic; } footer { background: #f0f0f0; width: 100%; overflow: hidden; opacity: 0.90; } footer p, footer h3 { color: #000; } footer pa { color: #000; text-decoration: none; } ul.social li { display: inline; } ul.social li img { height: 30px; } /*------------------------------- MEDIA -------------------------------*/ @media screen and (max-width: 478px) { body { position: absolute; } } @media screen and (max-width: 740px) { header { position: absolute; } #menu-icon { display: inline-block; } nav ul, nav:active ul { display: none; position: absolute; padding: 20px; background: #f0f0f0; border: 1px solid #FFF; right: 20px; top: 60px; width: 50%; border-radius: 2px 0 2px 2px; } nav li { text-align: center; width: 100%; padding: 10px 0; margin: 0; } nav:hover ul { display: block; } section { float: left; width: 100%; margin: 0; padding: 0; } article { float: left; width: 100%; margin: 15px 0; padding: 0; } } 

 <header> <a href="#" id="logo"></a> <nav> <a href="#" id="menu-icon"></a> <ul> <li> <a href="#" class="current">Início</a> </li> <li> <a href="#">DNR</a> </li> <li> <a href="#">PHC</a> </li> <li> <a href="#">Soluções</a> </li> <li> <a href="#">Notícias</a> </li> <li> <a href="#">Loja e Carrinho</a> </li> <li> <a href="#">Contacto</a> </li> </ul> </nav> </header> <ul class="slices"> <li> <img src="http://lorempixel.com/100/100" /> </li> <li> <img src="http://lorempixel.com/100/100" /> </li> <li> <img src="http://lorempixel.com/100/100" /> </li> <li> <img src="http://lorempixel.com/100/100" /> </li> </ul> <div class="clear"></div> <article> <img src="http://lorempixel.com/200/100" /> <h4>"Aquilo que os nosso clientes de facto querem não é apenas o conhecimento, mas a certeza de que o sabemos aplicar"</h4> <h4 class="bold">NC TI Consultant - DNR</h4> </article> <article> <img src="http://lorempixel.com/200/100" /> <h4>"A DNR é uma equipa jovem e dinâmica, sempre pronta a apresentar novas soluções e estratégias que nos facilitam o processo de trabalho. Tornando-o ágil e produtivo A nossa relação baseia-se sobretudo numa grande transparência e ajuda mútua."</h4> <h4 class="bold">Engº Ricardo Cabral - Totallink</h4> </article> <footer> <section> <img src="Content/Media/dnr_footer_logo.png" /> <h5>&copy;2016 DNRwebdesign</h5> </section> <section> <h3>Newsletter DNR</h3> <input type="text" id="email" placeholder="Email" /> <p> <button id="submit">Assine Agora</button> </p> <ul class="social"> <li> <a href="#" target="_self"> <img src="Content/Media/rss_feed_logo.png" /> </a> </li> <li> <a href="#" target="_blank"> <img src="Content/Media/facebook_logo.png" /> </a> </li> <li> <a href="#" target="_blank"> <img src="Content/Media/twitter_logo.png" /> </a> </li> <li> <a href="#" target="_blank"> <img src="Content/Media/google_plus_logo.png" /> </a> </li> </ul> <p>DNR - Todos os direitos reservados</p> </section> </footer>