3

我在将一些 div 包含在 div 中的图像居中时遇到了一些困难。我希望将按钮添加到 HTML 并让 jQuery 自动将它们居中，但我不能完全正确。

我在这里设置了一个小提琴：http: //jsfiddle.net/uucp/m3UmA/

我最初的计划是获取容器的大小（名为“选项卡”）并除以按钮的数量（页面上的“选项卡”类的数量），然后将每个选项卡 div 的宽度设置为该值。

我一定错过了一些基本的东西：默认填充或边距？困惑，困惑等，任何帮助将不胜感激。

HTML：

<div id="tabs" class="tabs">
    <div id="tab_chat" class="tab">
        <img class="tab_button" id="tab_chat_img" src="http://hanford.org/users/uucp/jsfiddle/daychat.png">
    </div>
    <div id="tab_users" class="tab">
        <img src="http://hanford.org/users/uucp/jsfiddle/dayusers.png">
    </div>
    <div id="tab_images" class="tab">
        <img src="http://hanford.org/users/uucp/jsfiddle/dayimages.png">
    </div>
    <div id="tab_night" class="tab">
        <img src="http://hanford.org/users/uucp/jsfiddle/daynight.png">
    </div>
    <div id="tab_refresh" class="tab">
        <img src="http://hanford.org/users/uucp/jsfiddle/dayrefresh.png">
    </div>
    <div id="tab_settings" class="tab">
        <img src="http://hanford.org/users/uucp/jsfiddle/daysettings.png">
    </div>
</div>
<p>
    <div id="console"></div>
</p>

CSS：

.tabs {
    height: 34px;
    padding-top: 1px;
    padding-bottom: 0px;
    background-color: #000;
}
.tab {
    text-align: center;
    border: 0;
    display: inline-block;
    color: #fff;
}
div.tab_button {
    border: 0;
    width: 32px;
    height: 32px;
}

JavaScript：

var tabCount = $(".tab").size();
var offset = 24;
var tabWidth = Math.floor(($("#tabs").width() / tabCount));
$('.tab').each(

function (i, tab) {
    $(tab).css("width", tabWidth + "px");
    $("#console").append("tabCount=" + tabCount + " tabWidth=" + tabWidth + " tabs.width=" + $("#tabs").width() + "<br/>");
});

谢谢你。

4

3 回答 3

3

您可以使用CSS, 使用text-align: center属性来处理它。

像这里一样添加它。

.tabs {
height: 34px;
padding-top: 1px;
padding-bottom: 0px;
background-color: #000;
text-align: center;
}

检查这个JSFiddle

于 2013-08-17T00:54:34.830 回答
0

如果您想要一个响应式解决方案，您可以这样做：DEMO

将此类添加到容器中div：justified-adjustment。

只需添加这些 CSS 规则：

.justified-adjustment { text-align: justify; }

.justified-adjustment > * {
   display: inline-block;
   vertical-align: middle;
}

.justified-adjustment::after {
   content: "";
   width: 100%;
   display: inline-block;
}

标记在哪里：

<div class="tabs-container justified-adjustment">
    <img src="#" alt="Image 1" />
    <img src="#" alt="Image 2" />
    <img src="#" alt="Image 3" />
</div>

尝试调整窗口大小，您会发现这是一个响应式解决方案。

于 2013-08-17T00:57:28.293 回答
0

您想要的可以使用固定的表格布局来实现。只需取一张包含一行和任意多列的表格，然后给表格这个 CSS: table-layout: fixed;。这将为您完成所有计算并使表格列的宽度相等。显然表格也需要100%的宽度，而且还需要让图片在表格单元格的中心，所以我们需要text-align: center放在单元格上。

而已。这是小提琴：链接

于 2013-08-17T01:26:54.903 回答