Question

我在使用css解决页脚中的对齐问题时遇到问题。我以为我会在这里寻求帮助。

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

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

这是我想要它的一个例子（看看页脚的底部，牛奶瓶图像旁边有文字对齐）... http://dthudson.com/example/centered-footer.png

我可以通过使用绝对定位来“解决”这个问题，但这不实用，因为页脚将会响应（我正在使用骨架）。我无法弄清楚如何编码这个概念，但我的想法是牛奶瓶img完全居中，然后文本对齐（或浮动）在img旁边w /文本和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添加到父元素。然后添加一些其他小道具，然后你去

.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>

更新了小提琴

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

享受！

Answer 2

将所有三个元素显示为inline-block并将其置于文本中心的问题是瓶子图像不会居中。

我创建了一个演示，展示了如何让你的小提琴尽可能接近样本图像。所有更改都添加到了CSS的底部。

首先，我将瓶子图像上的类更改为.center-img，因此任何更改都不会影响其他.center元素。

之后，我将瓶子图像定位为absolute并将其居中。然后使用填充为.text-left和.text-right制作50％宽度，以便为居中图像腾出空间。

剩下的只是为了让它看起来正确。

我还修复了浮动块的问题，该块在右侧被撞倒了。

Full Screen Demo

Regular Demo

.footer {
    height: auto;
}
.four.columns {
    width: 25%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.footer .sixteen.columns {
    padding-top: 34px;
}
.footer .sixteen.columns > * {
    padding-bottom: 16px;
}
.footer .left-text,
.footer .right-text {
    display: inline-block;
    float: left;
    width: 50%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.footer .left-text {
    padding-right: 40px;
}
.footer .right-text {
    padding-left: 40px;
}
.footer .center-img {
    position: absolute;
    display: block;
    left: 50%;
    bottom: 0;
    margin-left: -15.5px;
}
.footer .sixteen.columns p {
    margin-bottom: 0.5em;
}

CSS帮助：以/文本为中心对齐

2 个答案:

更新了小提琴