如何使用HTML和CSS正確對齊圖像（帶有文本）？

Question

我正在嘗試建立一個網站，打算在其中提供一些響應功能，即使在智能手機，平板電腦等設備上也能正常運行。

我將分享相關代碼，以便更輕松地說明問題：

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

現在，我有兩個問題：

1. ul.slices li中的4張圖像未在瀏覽器中心水平對齊
2. 在每篇文章中， img元素和相應的文本都不會水平對齊

我應該通過添加諸如div元素之類的方法來解決此問題，還是我的CSS不正確？

提前致謝，
格蘭維奇

 * { 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. 您應該刪除徽標底部的邊距，因為徽標過高會導致整個ul向右移動。 然后，您還應該刪除ul.slices li元素的浮動元素，因為您將它們顯示為inline-blocks ，因此不需要浮動元素。 還要在四個圖像周圍的ul添加text-align:center 。 完成后，這四個圖像將居中。

2. 只需將text-align:center添加到articles然后將text-align:justify添加到h4元素。

請單擊下面的“整頁”以查看我所做的更改（調整窗口大小，直到> 740px）。

PS：要使四個圖像在小型設備上不移到標題的后面，您需要在正文中進行填充或將標題設置回position:relative媒體查詢。

 * { 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>