0
を左、ボックスの右側にテキストのボックスに画像よりも高いZインデックスを持っている画像HTML、CSS、外側のdivテキスト整列中心は、テキストの箱がある
がありますテキストのボックスには、画像
の前にあるように見える今、私はテキストのみ、テキストのボックス内のテキストだけをしたい私はdivの内部のすべてのコンポーネントを中央に、テキストアラインセンターを使用し、これは必須
です左揃え
どのようにすればいいですか？
.button-yellow, .button-red {
font: 16px AdobeCaslonPro;
text-decoration: none;
padding: 6px 12px 6px 12px;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-radius: 4px;
moz-border-radius: 4px;
webkit-border-radius: 4px;
font-style: italic;
}
.button-yellow {
background-color: #ccb96b;
color: #430615;
}
.button-red {
background-color: #430615;
color: #ccb96b;
margin-top: -20px;
}
#section-welcome-content {
text-align: center;
}
#welcome-content{
width: 45%;
margin: 0 0 0 0 ;
}
#welcome-content-inner {
background-color: #ccb96b;
color: #430615;
padding: 50px;
z-index: 10;
position: relative;
}
#welcome-content p{
}
#crop {
width: 600px;
height: 500px;
overflow: hidden;
margin: 0 0 0 -50px ;
}
#crop img {
width: 800px;
height: 600px;
margin: -75px 0 0 -100px;
z-index: 1;
}<section id="section-welcome-content" class="pad">
<div id="welcome-content" style=" display: inline-block; " >
<div id="welcome-content-inner" >
<p>
<h3 style="font-size: 1.5em; text-transform: uppercase;"> <i>Lorem ipsum</i> </h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris arcu sapien, dignissim id laoreet quis, sollicitudin sed dui. Mauris mauris ligula, hendrerit sed ligula vitae, viverra auctor eros. Duis rutrum dolor a felis elementum, eu facilisis justo sollicitudin.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris arcu sapien, dignissim id laoreet quis, sollicitudin sed dui. Mauris mauris ligula, hendrerit sed ligula vitae, viverra auctor eros. Duis rutrum dolor a felis elementum, eu facilisis justo sollicitudin.
<br><br><br>
<a href="<?php echo base_url().$this->lang->lang(); ?>/aboutus" class="button-red" style="float: right;"> Read more</a>
</p>
</div>
<div>
</div>
<div>
</div>
</div>
<div id="crop" style=" display: inline-block; ">
<img src="http://media.caranddriver.com/images/media/51/2017-10best-lead-photo-672628-s-original.jpg" alt="" style=" "/>
</div>
</section>すべてのヘルプはあなたがちょうどあなたのwelcome-content-innerのdivでtext-align:left;を追加する必要があり、あなたがそこにいる
バディは気にしませんが、あなたの質問は、私にはクリストファー・ノーラン映画のようでした。簡単にするために、あなたが望む出力を示す画像をアップロードできますか？そうすれば、それをすぐに理解することができます。 –