の左に、私は基本的に、私は画像とテキストの両方に、左とテキストに画像を中心としたいCSSは - IMGと中央IMG +テキストはテキスト
この効果を達成したいと思います右。画像とテキストの両方が、それ自身の行を構成する大きなdivの一部です。この効果が達成されている限り、imgまたはtextが独自のdivの一部であるかどうかは関係ありません。
フレックスを使わずにこれを行うのが最善でしょう。これは、スペーシングと位置の問題を回避する一般的な方法です。しかし、私はこのテクニックについて否定的なことを読んだので、ちょうどそれを安全にプレイし、使用しないようにしています。
ヘルプは素晴らしいだろう、あなたはディスプレイフレックスを使用する場合、それは非常に簡単です、あなた
に感謝します。
次に、justify-contentプロパティをcenterに設定できます。
.parent {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
/* The following is optional, to add space between image and text */
.parent div {
margin: 0 5px;
}<div class="parent">
<div><img src=" http://fillmurray.com/200/200"/></div>
<div><p>Text for fun!!</p></div>
</div>私も同じ問題を抱えていました。私はイメージとテキストの中心の位置合わせを達成し、このフィドルで使った手法を使って解決したかったのです。あなたがdisplaを使用しない場合は、このフィドル
<div style="background-color:black;color:white;padding:20px; display: flex;">
<div style="color:white;overflow:hidden;width: 50%;height: 100px;">
<img src="http://placehold.it/350x150" style=" margin-right: 10px; float: right; width: 75%;">
</div>
<div style="color:white;/* padding:20px; */width: 50%;height: 100px;">
<h2 style=" margin-left: 10px;">This is text</h2>
</div>
</div>
を確認してください：あなたはこれを試すことができ、その後の使用は、この
.container{
float:left;
position:relative;
left:50%;
-webkit-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-ms-transform:translateX(-50%);
transform:translateX(-50%);
}
.section{
float:left;
margin:0 10px;
padding:10px;
border:1px solid #000;
}
.wrapper {
background: #fbfbfb;
border: 1px solid #000;
float: left;
width: 100%;
padding: 10px 0;
}<div class="wrapper">
<div class="container">
<img src=" http://fillmurray.com/200/200" class="section"/>
<div class="section"><p>Text for fun!!</p></div>
</div>
</div>を試すことができますフレックス...
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row" style="border: 2px solid; text-align: center;">
<div class="col-sm-3">
<h3>Parent Div</h3>
</div>
<div class="col-sm-3" style="border: 2px solid; margin: 14px;">
<h3>Div of image</h3>
</div>
<div class="col-sm-3" style="border: 2px solid; margin: 14px;">
<h3>Div of text</h3>
</div>
<div class="col-sm-3">
</div>
</div>
</body>
</html>
ここに私がやったことは、あなたがそれを理解しているか、何か質問があるかどうかを見てください。 http://codepen.io/anon/pen/RKppYd
<div class="container">
<div class="images"><img class="top" src="http://placehold.it/350x150"></div>
<div class="text">some text and stuff goes here probably.some text and stuff goes here probably.some text and stuff goes here probably.some text and stuff goes here probably.some text and stuff goes here probably.some text and stuff goes here probably.some text and stuff goes here probably.some text and stuff goes here probably.some text and stuff goes here probably. </div>
</div>
.container {
text-align:center;
}
.top {
vertical-align: text-top;
}
.images {
display:inline-block;
}
.text {
display:inline-block;
vertical-align: text-top;
width:350px;
background-color: black;
color:white;
}
、トップパディングをあなたにこのヘルプに感謝し、それ以外のTHXみんなあまりに –
を私はこのコードを使用するときに持っているように見える問題は、私は私の上下のパディングを0にしたいということですが、私はこれを設定するとき去ることはありません。 –