Question

我正在尝试在同一行上一个接一个地布置3张图片，每张图片都有自己的“Figcaption”。但是，如下图所示的figcaption完全没有居中，图形区域也没有与图像正确对齐。我需要图形占据与图像完全相同的空间，否则它会将其他图像推到下一行，我不想发生这种情况。基本上，当我将文本设置为在中心对齐时，为图形设置特定的131px大小然后使figcaption与图像完全对齐的最佳方法是什么？

问题图片 - http://i.imgur.com/s3aoUqb.png （图中没有与图像对齐）

HTML：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>Lakeside Books</title>
    <link rel="stylesheet" type="text/css" href="masterstyle.css">
    <meta name="viewsize" content="width-device-width,initial-scale=1.0">

    <!--[if IE]>
    <script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>

<body>
<div id="wrapper">
    <div id="sidebar">
        <nav id="nav">
            <h3 id="welcometext">Welcome To<br>Lakeside Books</h3>
            <div id="searchbar">
                <form action="http://www.example.com/search.php">
                    <input type="text" name="search" placeholder="...Search Book Title"/>
                </form>
            </div>
            <ul>
                <li>
                    <a class="link">
                        Home
                    </a>
                </li>
                <li>
                    <a class="link">
                        Categories
                    </a>
                </li>
                <li>
                    <a class="link">
                        Bestsellers
                    </a>
                </li>
                <li>
                    <a class="link">
                        Contact
                    </a>
                </li>
            </ul>
        </nav>
    </div>

    <div id="sectionone">
        <div id="containerone">
            <div id="header">
                <div id="logo">
                    <h1>LAKESIDE BOOKS</h1>
                    <p>KERRYS LOCAL BOOKSTORE</p>
                </div>
            </div>
        </div>
    </div>

    <div id="sectiontwo">
        <div id="containertwo">
            <h2 id="sectwohead">Best Selling Books Right Now</h2>
                <div id="bestsellerimages">
                    <figure>
                        <img src="Images/4.jpg" alt="book1" height="200" width="131">
                        <figcaption>The Girl On The Train - Paula Hawkins</figcaption>
                    </figure>
                    <figure>
                        <img src="Images/3.jpg" alt="book2" height="200" width="131">
                    </figure>
                    <figure>
                        <img src="Images/5.jpg" alt="book1" height="200" width="131">
                    </figure>
                </div>
        </div>
    </div>

</div>
</body>
</html>

CSS：

html, body { /* ### */
    margin:0;
    padding:0;
    height:100%;
    width:100%;
}
body {
    background-color: #fdfdfd;
    font-family: Arial, "Open Sans", sans-serif-light, sans-serif, "Segoe UI";
}
#wrapper {
    width: 100%;
    height: 100%;
    margin:0 0 0 20%; /* ### */
}
#sidebar {
    background-color: #212528;
    position: fixed;
    width: 20%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}
#nav {
    color: #DADADA;
    display: block;
    max-width: 100%;
}
#nav ul {
    padding-left: 0;
}
#nav li {
    list-style-type: none;
    margin: 0;
    padding: 0.75em 0 0.75em 0;
    text-align: center;
    max-width: 100%;
}
#nav li:hover {
    background:#333;
}
#nav li a {
    display: block;
    padding: 0.5em 0;
}
.link {
    text-align: right;
    margin-right: 25%;
    letter-spacing: 1px;
}
#welcometext {
    text-align: center;
    font-style: italic;
    text-transform: uppercase;
    font-size: 1em;
    margin-top: 2em;
}
#searchbar {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    padding: 1em 1em 0.5em 1em;
    text-align: right;
}
#searchbar input {
    max-width: 95%;
}
#sectionone {
    /*position: fixed;*/
    top: 0;
    right: 0;
    width: 80%;
}
#containerone {
    margin-top: 0;
    width: 80%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    border-bottom: 2px solid #DADADA;
    box-shadow: inset 0 -6px 0 0 #fdfdfd, inset 0 -8px 0 0 #DADADA;
}
#header {
    margin: 6em 0 6em 0;
}
#logo h1 {
    color: #ed786a;
    text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.1);
    letter-spacing: 13px;
}
#logo p {
    margin-top: -0.6em;
    color: #888888;
    letter-spacing: 4px;
    font-size: 0.85em;
}
#sectiontwo {
    width: 80%;
    top: 0;
    right: 0;
}
#containertwo {
    width: 80%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
#sectwohead{
    margin: 2em 0 2em 0;
    color: #888888;
}
#bestsellerimages{
    float: left;
    display: inline-block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 2em 0;
}
#bestsellerimages img{
    padding: 0 1em 0 1em;
}
#bestsellerimages figure{
    display: inline-block;
    width: 131px;
}

Answer 1

padding-left上的img设置。尝试更改：

#bestsellerimages img{
    padding: 0 1em 0 1em;
}

为：

#bestsellerimages img{
    padding: 0;
}

在你的CSS中

。

无法在图像下正确对齐

1 个答案: