"div"と "p"をCSSと接続

Question

"p"のテキストを "div"の中央に配置したいと思います。私のHTMLは次のようなものです：

<div class="picture"> 
    <img src="/sites/default/files/default_images/colorful-triangles-background_yB0qTG6.jpg" width="1080" height="1920" alt="background to view" typeof="foaf:Image"> 
</div> 
<p class="textik"">Hello handsome.</p> 

しかし、私はhtmlタグを変更できません。私はCSSだけです。これを行う方法はありますか？私はいくつかの方法を試しましたが、うまくいかないようです。

Answer 1

HTMLを変更せずにこれを行う唯一の方法は、人工的にdivタグの上にpタグを配置することです。

p.textik { 
    margin-top: -5px; 
} 

必要に応じて調整し、モバイルデバイスをテストします。

下にある要素も上に移動しないようにするには、いずれかのパディングボトムを使用してこれを防ぐことができます。あなたはそれをabsolute位置し、それはCSSを使用した場所です変換することができますので、

p.textik { 
    padding-bottom: 5px; 
} 

Answer 2

私はあなたが実際にpタグを作りたいと仮定していますが、あなたの画像の中央に表示されます。 を使用することで、位置を移動して変換する必要はありません。画像/外側の要素のサイズが変わると、位置を変更する必要はありません。

<div class='someOuterElement'> 
    <div class="picture"> 
    <img src="http://placehold.it/500/500" width="500" height="500" > 
    </div> 
    <p class='textik'>Hello handsome.</p> 
</div> 

とスタイルそれ：：ような何か

.someOuterElement { 
    position: relative; 
    width: 500px 
} 

.textik { 
    text-align; center; 
    position: absolute; 
    top:50%; 
    left: 50%; 
    transform: translate(-50%, -50%) 
} 

は、CSSについての詳細情報は