我想在水平和垂直的情况下做我的图像,但是我可以水平地居中,同时我想要这种响应迅速,有人可以帮助我吗?在此处输入代码
.video{
width: 100%;
height: 500px;
background-color: peru;
position: absolute;
}
.moldura{
display: block;
width: 50px;
margin-right: auto;
margin-left: auto;
margin-top: auto;
margin-bottom: auto;
border: 1px solid black;
}
.moldura img{
width: 50px;
}
<!DOCTYPE html>
<html>
<head>
<title>TESTE</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div class="video">
<div class="moldura">
<img src="https://lh4.ggpht.com/SKQHLsT8xsNpXeL5si4bBqSNqdy8Qbvzk15J3qWTp55AnnkbNO6-vBJhIBTQxyq16YE=w300">
</div>
</div>
</body>
</html>
您是否尝试过使用Flex Boxes?
编辑:根据评论,不,我不知道使用" Align-Items",效果很好,我已经相应地编辑了片段!:)
.video{
display:flex;
justify-content: center;
align-items: center;
flex-direction:column;
height:250px;
background-color: peru;
}
.moldura{
}
.moldura img{
height:50px;
border:1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<title>TESTE</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div class="video">
<div class="moldura">
<img src="https://lh4.ggpht.com/SKQHLsT8xsNpXeL5si4bBqSNqdy8Qbvzk15J3qWTp55AnnkbNO6-vBJhIBTQxyq16YE=w300">
</div>
</div>
</body>
</html>
您是:
.video{
width: 100%;
height: 500px;
background-color: peru;
position: absolute;
}
.moldura{
display: block;
width: 50px;
border: 1px solid black;
/* Here is the important code*/
position: relative;
top: 50%;
left: 50%;
transform:translate(-50%, -50%);
}
.moldura img{
width: 50px;
}
<!DOCTYPE html>
<html>
<head>
<title>TESTE</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div class="video">
<div class="moldura">
<img src="https://lh4.ggpht.com/SKQHLsT8xsNpXeL5si4bBqSNqdy8Qbvzk15J3qWTp55AnnkbNO6-vBJhIBTQxyq16YE=w300">
</div>
</div>
</body>
</html>
添加了Line-Height CSS属性。
.video{
width: 100%;
height: 500px;
background-color: peru;
position: absolute;
}
.moldura{
display: block;
width: 50px;
margin:0 auto;
line-height:500px;
height:100%;
}
.moldura img{
width: 50px;
vertical-align:middle;
}
<!DOCTYPE html>
<html>
<head>
<title>TESTE</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div class="video">
<div class="moldura">
<img src="https://lh4.ggpht.com/SKQHLsT8xsNpXeL5si4bBqSNqdy8Qbvzk15J3qWTp55AnnkbNO6-vBJhIBTQxyq16YE=w300">
</div>
</div>
</body>
</html>