.dd{
height:100px;
width:100%;
border:1px soild red;
background:#000;
}
.dd .d1{
height:20px;
width:20px;
border:1px solid green;
display:inline-block;
}
.dd .d2{
height:20px;
width:20px;
border:1px solid green;
display:inline-block;
}
.dd .d3{
height:40px;
width:30px;
border:1px solid yellow;
display:inline-block;
}<div class="dd">
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</div>
在我的项目中，我总是找不到垂直元素的好方法。任何人都有使得元素（任何环境）垂直对齐的好处吗？
我自己的愚蠢方式：
当out div没有高度时，那对我来说比较容易，我经常使得margin-top eaquls是margin-bottom，并且它垂直对齐如下：
.dd{
height:auto;
width:100%;
background:#000;
}
.dd>div:first-child{
display:inline-block;
margin-top:1em;
margin-bottom:1em;
height:80px;
width:50px;
border:1px solid red;
margin-left:1em;
}
.dd>div:last-child{
display:inline-block;
margin-top:1em;
margin-bottom:1em;
height:50px;
width:50px;
border:1px solid green;
}<div class="dd">
<div></div>
<div></div>
</div>
但在这种情况下，我现在找不到好的做法，任何人都有想法？
第二次添加
我改变了我的愚蠢方式：
.dd>div:first-child{height:50px }
到
.dd>div:first-child{height:80px }
似乎我的愚蠢方式确实有效，除非你改变身高：80px回到高度：50px
请在此处进行更多扩展，以便我们了解它为什么可以工作，谢谢
答案 0 :(得分：1)
尝试使用：
public void DeleteEmployee(int originalEmployeeId, string originalName, string originalGender, string originalCity)
{
var cs = ConfigurationManager.ConnectionStrings["DBConnectionString"].ConnectionString;
using (var con = new SqlConnection(cs))
{
const string deleteQuery = "Delete from Employee2 where EmployeeId=@OriginalEmployeeId and Name = @OriginalName and Gender = @OriginalGender and " +
"City = @OriginalCity";
var cmd = new SqlCommand(deleteQuery, con);
cmd.Parameters.AddWithValue("@OriginalEmployeeId", originalEmployeeId);
cmd.Parameters.AddWithValue("@OriginalName", originalName);
cmd.Parameters.AddWithValue("@OriginalGender", originalGender);
cmd.Parameters.AddWithValue("@OriginalCity", originalCity);
con.Open();
cmd.ExecuteNonQuery();
}
}
public void UpdateEmployee(int employeeId, string name, string gender, string city)
{
var cs = ConfigurationManager.ConnectionStrings["DBConnectionString"].ConnectionString;
using (var con = new SqlConnection(cs))
{
const string updateQuery = "Update Employee2 set Name=@Name, Gender=@Gender, City=@City where EmployeeId=@EmployeeId";
var cmd = new SqlCommand(updateQuery, con);
cmd.Parameters.AddWithValue("@EmployeeId", employeeId);
cmd.Parameters.AddWithValue("@Name", name);
cmd.Parameters.AddWithValue("@Gender", gender);
cmd.Parameters.AddWithValue("@City", city);
con.Open();
cmd.ExecuteNonQuery();
}
}
这样，.dd容器中的任何项目都将垂直居中。如果您希望所有内容都水平居中，请写下：
.dd {
display: flex;
align-items: center;
}
修改 注意：这仍然适用于Flex容器中元素的高度。
答案 1 :(得分：1)
根据这个document，在CSS2中你可以使用table-cell显示和vertical-align属性，但我不是这类代码的忠实粉丝。
这是使用它的代码的小提琴： https://jsfiddle.net/Laf2wv4n/1/
答案 2 :(得分：1)
我使用了父:pseudo的{{1}}元素:before来垂直对齐内部元素
每个内联元素都可以使用dd
我使用了伪元素，因此它可以用作vertical-align:middle元素inline-block 100%的父元素
height.dd {
height: 100px;
width: 100%;
border: 1px soild red;
background: #000;
}
/* added to vertiaclly align the elements inside */
.dd:before {
content: '';
height: 100%; /* set the height of the element to 100% so that the inner elements can align to its full height */
display: inline-block; /* this is the property which is need to vertically center */
width: 1px; /* set the width to 1px */
margin-left: -1px; /* so that the width doesnt effect the children */
vertical-align: middle; /* is added to vertically align the elements */
}
.dd div {
vertical-align: middle; /* is added to vertically align the elements */
}
/* end */
.dd .d1 {
height: 20px;
width: 20px;
border: 1px solid green;
display: inline-block;
}
.dd .d2 {
height: 20px;
width: 20px;
border: 1px solid green;
display: inline-block;
}
.dd .d3 {
height: 40px;
width: 30px;
border: 1px solid yellow;
display: inline-block;
}
答案 3 :(得分：0)
垂直对齐文本或块是非常古老且已知的html / css问题。通过多年来提出了许多解决方案，这取决于浏览器的功能和初始条件（文本或块，已知或不是元素的高度等）。
克里斯·科伊尔（Chris Coyier）试图在自己的网站上将所有技术收集到一个完整的指南中，并通过最常用的案例对其进行分类。
Centering in CSS: A Complete Guide
我最喜欢的是现在最现代的方法：flexbox并通过transform: translateY(-50%)规则对齐。它们是最简洁明亮的。