CSS 帮助 : Centered Img w/Text Aligned to it

Question

我在使用 CSS 解决页脚中的对齐问题时遇到了问题。我想我会尝试在这里寻求一些帮助。

编辑:链接到 jsfiddle:http://jsfiddle.net/X8Ej4/6/

在 CSS 中向下滚动到/** Layout Style Sheet */进行编辑，抱歉，基础样式表和骨架样式表没有正确集成，所以我只是添加了它们全部在 CSS Pane 中。

这是我想要的示例(查看页脚的最底部，其中文本与牛奶瓶图像对齐)... http://dthudson.com/example/centered-footer.png

我可以通过使用绝对定位来“解决”问题，但这不切实际，因为页脚会响应(我正在使用骨架)。我不知道如何编写这个概念的代码，但我的想法是让牛奶瓶 img 完美居中，然后文本在 img 旁边对齐(或 float )某种方式，文本和 img 之间有边缘间距。

这是 HTML...

<div class="sixteen columns>
                        <div class="center">
                        <img class="milk-logo" src="images/ccr-logo-milk.png" />
                        </div> <!-- center -->

                        <div class="left-text">
                            <p>FICTION / NON-FICTION / POETRY / ART</p>
                            <p>&copy;2013</p>
                        </div> <!-- left-text -->

                        <div class="right-text">
                            <p>CREAM CITY REVIEW</p>
                            <p>EST. 1975</p>
                        </div> <!-- right-text -->
</div>

还有 CSS...

.footer .sixteen columns{ text-align:center; 
                          margin-left:auto; 
                          margin-right:auto; }

.milk-logo { display:inline-block;  }   

.sixteen .center { margin:0; }

.footer .left-text { float:left; 
                     text-align:right; 
                     display:inline; font:0.45em "Lato", sans-serif;    
                     text-transform:uppercase; 
                     letter-spacing:0.2em; 
                     color:#ebebeb; }

.footer .right-text { float:right; 
                      text-align:left; 
                      display:inline; 
                      font:0.45em "Lato", sans-serif; 
                      text-transform:uppercase; 
                      letter-spacing:0.2em; 
                      color:#ebebeb; }

如有任何帮助，我们将不胜感激。谢谢!

Answer 1

我相信答案的关键是使用 display: inline-block。将此属性添加到所有三个元素，并将 text-align: center 添加到父元素。然后添加一些其他小 Prop 就可以了

.sixteen {
    text-align: center;
}
.center, .left-text, .right-text {
    display: inline-block;
    vertical-align: middle;
}
.left-text, .right-text {
    width: 200px;
}
.left-text p, .right-text p {
    display: block;
    white-space: nowrap;
}
.left-text {
    text-align: right;
    margin-right: 5px;
}
.right-text {
    text-align: left;
    margin-left: 5px;
}

请注意，我还向左右 div 添加了 width: 200px 以使它们相等。您可以将其更改为您想要的任何值。您只需确保每个 div 内内容的宽度不会超过此值，并且此值中的两个值加上图像 div 宽度的总和不会超过屏幕宽度。

不要忘记更改 div 的顺序以对应它们在布局中的实际顺序。

<div class="sixteen columns">
        <div class="left-text">
            <p>FICTION / NON-FICTION / POETRY / ART</p>
            <p>&copy;2013</p>
        </div><div class="center">
            <img class="milk-logo" src="http://dthudson.com/example/ccr-logo-milk.png" />
        </div><div class="right-text">
            <p>CREAM CITY REVIEW</p>
            <p>EST. 1975</p>
        </div>
        <!-- right-text -->
    </div>

更新 fiddle

http://jsfiddle.net/X8Ej4/7/

尽情享受吧!