Question

我有6个div，每个div包含一个$('#main-panel').find('.main-container')和一个链接，我希望它们都居中，顶部是<p>，底部是链接。这是我的html（它对所有6个基本相同）：

<p>

（所有6个都包含在<div id="home"> <p>P</p> <a class="nav" href="index.html">home</a> </div>）

中

这是我的css：

<header>

我无法让header div { width: 133.33px; height: 145px; text-align: center; font-size: 18px; padding-bottom: 3px; font-weight: lighter; float: left; display: table; } header div a { text-decoration: none; color: #474747; vertical-align: bottom; text-align: center; display: table-cell; } header div p { font-size: 60px; padding: 0; text-align: center; vertical-align: top; display: table-cell; }与text-align: center同时发挥作用。无论如何在不使用vertical-align的情况下获得顶部/底部定位，还是让vertical-align工作？

Answer 1

以下是您正在寻找的代码，我希望：（这些不是您正在寻找的机器人）

.wrapper {
    text-align: center;
    height: 200px;
    width: 200px;
    border: 1px solid black;
    display: table;
}
.container {
    display: table-cell;
    vertical-align: bottom;
}

<div class="wrapper">
    <div class="container">
        <p>Hello World!</p>
        <a href="#">I am a Link!</a>
    </div>
</div>

根据Alohci的评论，如果您想要顶部的<p>标记和底部的<a>标记，则应使用position属性，如下所示：

.wrapper {
    position: relative;
    text-align: center;
    height: 200px;
    max-height: 200px;
    width: 200px;
    max-width: 200px;
    border: 1px solid black;
    display: table;
}
.container p {
    display: inline;
    vertical-align: top;
}
.container a {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

<div class="wrapper">
    <div class="container">
        <p>Hello World!</p>
        <a href="#">I am a Link!</a>
    </div>
</div>

Answer 2

使用以下CSS，您可以获取7/30/2015 9:15:24 PM 7/30/2015 9:18:45 PM 7/31/2015 7:13:26 AM 7/31/2015 9:22:46 PM 8/01/2015 9:26:07 AM并且链接都位于居中位置

AppDomain.CurrentDomain.ProcessExit

这是Jsfiddle解决方案链接。

http://jsfiddle.net/rbdqtxyf/

text-align无法与vertical-align一起使用

2 个答案: