0

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

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

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


这是我想要的一个示例（查看页脚的最底部，牛奶瓶图像旁边有对齐的文本）... http://dthudson.com/example/centered-footer。 PNG


我可以通过使用绝对定位来“解决”这个问题，但这并不实用，因为页脚将是响应式的（我正在使用骨架）。我不知道如何编写这个概念，但我的想法是让奶瓶 img 完全居中，然后在 img 旁边以某种方式对齐（或浮动）文本和 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; }

任何帮助将不胜感激。谢谢！

4

2 回答 2

0

我相信答案的关键是使用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;
}

请注意，我还添加width: 200px了左右 div 以使它们相等。您可以将其更改为您想要的任何值。您只需要确保每个 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/

享受！

于 2013-11-07T22:57:44.047 回答
0

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

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

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

之后，我将瓶子图像定位absolute并居中。 .text-left然后.text-right每个都设置为 50% 的宽度，并带有填充，以便为居中的图像腾出空间。

其余的只是调整以使其看起来正确。

我还解决了浮动块在右侧被撞倒的问题。

全屏演示

常规演示

.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;
}
于 2013-11-08T00:20:07.197 回答