divの画像を水平方向と垂直方向に中心合わせする方法

-3

画像を水平方向と垂直方向の中心にしたいが、同時に水平方向に中心を置くことができます。同時にこの応答性が必要です。誰でも助けてくれますか？そこdivの画像を水平方向と垂直方向に中心合わせする方法

.video{ 
 
width: 100%; 
 
height: 500px; 
 
background-color: peru; 
 
position: absolute; 
 
} 
 

 
.moldura{ 
 
\t display: block; 
 
\t width: 50px; 
 
\t margin-right: auto; 
 
\t margin-left: auto; 
 
\t margin-top: auto; 
 
\t margin-bottom: auto; 
 
\t border: 1px solid black; 
 
} 
 

 
.moldura img{ 
 
\t width: 50px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>TESTE</title> 
 
<link rel="stylesheet" type="text/css" href="estilo.css"> 
 
</head> 
 
<body> 
 

 
\t <div class="video"> 
 
\t \t <div class="moldura"> 
 
\t \t \t <img src="https://lh4.ggpht.com/SKQHLsT8xsNpXeL5si4bBqSNqdy8Qbvzk15J3qWTp55AnnkbNO6-vBJhIBTQxyq16YE=w300"> 
 
\t \t </div> 
 

 
\t </div> 
 
\t 
 
</body> 
 
</html>

出典

2017-11-21 Diogo Calisto

あなたがSOに質問を投稿する前に少し研究を行うことが期待されます。この質問は何百回も聞かれており、クイック検索は複数の回答をもたらしていました。次回にお聞きになる前に、少し研究をしてみてください – Pete

こんにちは！それは私の3番目の時間だから、これは私の質問のための解決策ではないと言います。フレックスボックスを使わないので、 "Flexbox：horizontal and vertical"ありがとうございますが、私は私の質問の正しい答えを持っています –

ここにコードを入力してくださいあなたは、次のとおりです。

.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{ 
 
\t width: 50px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>TESTE</title> 
 
<link rel="stylesheet" type="text/css" href="estilo.css"> 
 
</head> 
 
<body> 
 

 
\t <div class="video"> 
 
\t \t <div class="moldura"> 
 
\t \t \t <img src="https://lh4.ggpht.com/SKQHLsT8xsNpXeL5si4bBqSNqdy8Qbvzk15J3qWTp55AnnkbNO6-vBJhIBTQxyq16YE=w300"> 
 
\t \t </div> 
 

 
\t </div> 
 
\t 
 
</body> 
 
</html>

出典

2017-11-21 16:49:58 FcoRodr

Thx !!!!私は "変換"についてもっと学ぶ必要があります、それは私が必要なものです！ :) –

@DiogoCalisto正解の場合は、有効な回答として受け入れてください： – FcoRodr

あなたはフレックスボックスを使用してみましたか？

EDIT：コメントごとに、私は "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> 
 
\t <title>TESTE</title> 
 
<link rel="stylesheet" type="text/css" href="estilo.css"> 
 
</head> 
 
<body> 
 

 
\t <div class="video"> 
 
\t \t <div class="moldura"> 
 
\t \t \t <img src="https://lh4.ggpht.com/SKQHLsT8xsNpXeL5si4bBqSNqdy8Qbvzk15J3qWTp55AnnkbNO6-vBJhIBTQxyq16YE=w300"> 
 
\t \t </div> 
 

 
\t </div> 
 
\t 
 
</body> 
 
</html>

出典

2017-11-21 16:51:46

2番目のフレックスボックスは必要ありません。ちょうど、正当なコンテンツセンターを持つ整列アイテムセンターを使うことができます。水平と垂直両方のセンタリング：https://jsfiddle.net/174ne83x/ – Pete

新しいものを毎日学ぶ！そのための乾杯、戻っていくつかのスタイルシートを修正する必要があります！ –

このAndrewを教えてくれてありがとう！ :) –

追加された行の高さのCSSプロパティ。

.video{ 
 
width: 100%; 
 
height: 500px; 
 
background-color: peru; 
 
position: absolute; 
 
} 
 

 
.moldura{ 
 
\t display: block; 
 
\t width: 50px; 
 
\t margin:0 auto; 
 
    line-height:500px; 
 
    height:100%; 
 
} 
 

 
.moldura img{ 
 
\t width: 50px; 
 
    vertical-align:middle; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>TESTE</title> 
 
<link rel="stylesheet" type="text/css" href="estilo.css"> 
 
</head> 
 
<body> 
 

 
\t <div class="video"> 
 
\t \t <div class="moldura"> 
 
\t \t \t <img src="https://lh4.ggpht.com/SKQHLsT8xsNpXeL5si4bBqSNqdy8Qbvzk15J3qWTp55AnnkbNO6-vBJhIBTQxyq16YE=w300"> 
 
\t \t </div> 
 

 
\t </div> 
 
\t 
 
</body> 
 
</html>

出典

2017-11-21 16:55:33

うわーこの解決策は最後の10年です！ – Pete

divの画像を水平方向と垂直方向に中心合わせする方法

答えて

関連する問題