Question

好的，我有以下HTML结构

<div class="category">
    <div class="container bottom">
        <h2>Name1</h2>
    </div>
    <div class="container top">
        <h2>Name2</h2>
    </div>
    <div class="container ">
        <h2>Name3</h2>
    </div>
    <div class="container">
        <h2>Name4</h2>
    </div>
    <div class="container">
        <h2>Name5</h2>
    </div>
    <div class="container">
        <h2>Name6</h2>
    </div>
    <div class="container">
        <h2>Name7</h2>
    </div>
</div>

CSS就是这样：

* {
    margin: 0;
    padding: 0;
}

.category {
    text-align: center;
    width: 95%;
    margin: 0 auto;
}

.container {
    display: inline-block;
    width: 33%;
    height: 4em;
}

h2 {
    display: inline-block;
    width: 100%;
}

.left > * {
    text-align: left;
}

.right > *{
    text-align: right;
}

.top > * {
    vertical-align: top;
}

.bottom > * {
    vertical-align: bottom;
}

主要目标是做这样的事情： Example

为此，假装图片准确无误且.container（灰色框）具有相同的大小（如您在CSS中所见）

我的问题是vertical-align无法正常工作..我已经查看了CodePen Code这个没有display: table-cell和其他与桌面显示相关的解决方案的问题我{＆＃39}。在StackOverflow中找到了。为什么它不适用于我的HTML和CSS代码？我在中间得到了所有<h2>对齐：\

Answer 1

在Codepen示例中，h2实际上并不是在框中垂直对齐。 这是彼此相邻的元素对齐，而不是容器中的元素。这有点令人困惑。有一个内联元素将无法工作，但如果你有两个，你会看到它们彼此垂直对齐。但是，在使用表格单元格时，此功能会发生变化。

尝试从Codepen示例中删除图像，然后在div上放置一个高度。你会看到它停止垂直对齐。

我会与display:table和display:table-cell保持一致。它将使用position:absolute方法工作，但如果文本扩展开箱即可，您将遇到布局问题，因为文本不再出现在文档流中。通过将它们设置为表格，您可以保持一定的灵活性。

Answer 2

解决方案是使用-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { UITapGestureRecognizer *tapRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(edit:)]; tapRecognizer.numberOfTapsRequired = 2; [self.view addGestureRecognizer:tapRecognizer]; [tapRecognizer requireGestureRecognizerToFail:tapRecognizer]; CardTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"editCell" forIndexPath:indexPath]; NSString *cellFirstText = cell.cellFirstText.text; NSString *cellSecondText = cell.cellSecondText.text; [[NSUserDefaults standardUserDefaults] setObject:cellFirstText forKey:@"cellFirstToEdit"]; [[NSUserDefaults standardUserDefaults] setObject:cellSecondText forKey:@"cellSecondToEdit"]; } -(void)edit: (UITapGestureRecognizer *)sender { UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Title" message:@"message" delegate:self cancelButtonTitle:@"cancel" otherButtonTitles:@"save", nil]; alert.alertViewStyle = UIAlertViewStyleLoginAndPasswordInput; [[alert textFieldAtIndex:1] setSecureTextEntry:NO]; [alert textFieldAtIndex:0].text = [[NSUserDefaults standardUserDefaults] objectForKey:@"cellFirstToEdit"]; [alert textFieldAtIndex:1].text = [[NSUserDefaults standardUserDefaults] objectForKey:@"cellSecondToEdit"]; alert.tag = 3; [alert show]; }定位。

absolute

要设置不同类的样式，只需在h2之后更改.container { position: relative; } .container h2.middle { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }类，并根据需要应用.middle值。像这样：

left right top bottom

在你的HTML中：

.container h2.top {
  position: absolute;
  top: 0;
}

.container h2.bottom {
  position: absolute;
  bottom: 0;
}

.container h2.right {
  position: absolute;
  right: 0;
}

.container h2.left {
  position: absolute;
  left: 0;
}

Answer 3

<h2>对齐是由于其默认margin。尝试使用translateY定位h2。

.category {
text-align: center;
width: 95%;
margin: 0 auto;
}

.container {
border: 1px solid red;
display: inline-block;
width: 32%;
height: 4em;
}

.left {
text-align: left;
}

.right {
text-align: right;
}

.top h2{
  transform: translateY(0);
}

.bottom h2 {
  transform: translateY(100%);
}
h2{
margin: 0;
display: inline-block;
transform: translateY(50%);
}

<div class="category">
<div class="container bottom">
    <h2>Name1</h2>
</div>
<div class="container top">
    <h2>Name2</h2>
</div>
<div class="container left">
    <h2>Name3</h2>
</div>
<div class="container bottom">
    <h2>Name4</h2>
</div>
<div class="container right">
    <h2>Name5</h2>
</div>
<div class="container bottom right">
    <h2>Name6</h2>
</div>
<div class="container">
    <h2>Name7</h2>
</div>
</div>

Answer 4

首先div的高度非常小，而h2的默认值为margin。根据我的vertical align bottom的最佳方法是制作

＆＃13;

.container{ 
   position: relative;
}
.bottom { 
    position: absolute; 
    bottom: 0px;
 }

＆＃13;

<div class="container">
   <h2 class="bottom">Name1</h2>
</div>

＆＃13;

在div中垂直对齐h2

4 个答案: