文章/答案/技术大牛

发布

社区首页 >问答首页 >引导div列不垂直对齐行

问引导div列不垂直对齐行
EN

Stack Overflow用户

提问于 2014-07-15 04:59:18

回答 2查看 2.7K关注 0票数 0

这是我的第一篇帖子，因为我被困在了第一个网站的第一部分。

我正试着制作一个导航栏，有五个部分：

(三个项目的垂直列表)(标签)(标识)(标签)(三个项目的垂直列表)

例如,

(苹果，橙，梨)(水果) (Logo) (蔬菜)(西兰花，芹菜，生菜)

使用我的代码，两个垂直列表不对齐，我无法让它们在条形图中垂直中心。

这是我的密码：

HTML

<body>
<div class='nav'>
    <div class='container-fluid'>
        <div class='row'>
            <div class='col-md-3'>
                <ul class='port-list' class='navbar-left'>
                    <li>Art</li>
                    <li>Design</li>
                    <li>Writing</li>
                </ul>
            </div>

            <div class='col-md-3'>
                <p class='port'>Portfolio</p>
            </div>

            <img>

            <div class='col-md-3'>
                <p class='about'>About</p>
            </div>

            <div class='col-md-3'>
                <ul class='about-list' class='navbar-right'>
                    <li>Biography</li>
                    <li>R&eacute;sum&eacute;</li>
                    <li>Contact</li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>

CSS

* {
    list-style: none;
    list-style-type: none;
}

body {
    height: 100%; /* Prevents rubber-band scrolling */
    overflow: hidden; /* Prevents rubber-band scrolling */
}

.nav {
    color: #fff;
    font-family: 'Donegal One', serif;
    background-color: #004d40;
    padding-top: 12px;
    padding-bottom: 8px;
    display: block;
}

.port-list {
    text-align: right;
}

.port {
    text-align: left;
}

.about {
    text-align: right;
}

.about-list {
    text-align: left;
}

这里的新手会很感激你的帮助。谢谢。

html

css

twitter-bootstrap

回答 2

Stack Overflow用户

发布于 2014-07-15 17:07:40

这里是更新的代码

HTML

<div class='row newRow'>

将newRow添加到row CSS

.newRow {
  width: 100%;
  display: table;
}
.newRow .col-md-3 {
  display: table-cell;
  vertical-align: middle;
  float: none
}

票数 2

Stack Overflow用户

发布于 2014-07-15 05:47:23

可以为这两个div定义line-height，如下所示：

<div class='col-md-3' style="line-height:58px;">
      <p class='port'>Portfolio</p>
</div>
....
<div class='col-md-3' style="line-height:58px;">
     <p class='about'>About</p>
</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/24750121

复制

相似问题

问引导div列不垂直对齐行
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导div列不垂直对齐行EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导div列不垂直对齐行
EN