段落を画像の左下に揃える方法は？

-2

私は、下の画像のように、中央に水平に、ナビゲーションバーのすぐ下に表示されているような結果を得たいと思います。段落を画像の左下に揃える方法は？

これは、私はそれを行うことができますどのように https://jsfiddle.net/L1drp0b7/

#contactsul { 
 
font-size: 1em; 
 
    font-weight: 100; 
 
    list-style: none; 
 
    position: static; 
 
    display : inline-block; 
 
    vertical-align : bottom; 
 
    width :5%; 
 
} 
 

 
#image { 
 
    width:30%; 
 
    display:inline-block; 
 
} 
 

 
#contacts { 
 
    margin:0 auto; 
 
    width:100%; 
 
}

<div id="contacts"> 
 
<ul id="contactsul"> 
 
    <li>Apple</li> 
 
    <li>Banana</li> 
 
    <li>Fruit</li> 
 
    <li>Meat</li> 
 
</ul> 
 
<img src="http://res.freestockphotos.biz/pictures/9/9552-a-green-apple-on-a-dark-background-pv.jpg" id="image">

...私のコードは、今、私が試したが、私はdiv要素をセンタリングするために管理していないです？

出典

2016-09-16 alberto96

解決方法1：

#contactsul { 
 
font-size: 1em; 
 
    font-weight: 100; 
 
    list-style: none; 
 
    position: static; 
 
    display : inline-block; 
 
    vertical-align : bottom; 
 
    width :10%; 
 
} 
 

 
#image { 
 
    width:30%; 
 
    display:inline-block; 
 
} 
 

 
#contacts { 
 
    width:100%; 
 
    text-align : center; 
 
}

<div id="contacts"> 
 
<ul id="contactsul"> 
 
    <li>Apple</li> 
 
    <li>Banana</li> 
 
    <li>Fruit</li> 
 
    <li>Meat</li> 
 
</ul> 
 
<img src="http://res.freestockphotos.biz/pictures/9/9552-a-green-apple-on-a-dark-background-pv.jpg" id="image"> 
 

 
</div>

解決方法2：

#contactsul { 
 
font-size: 1em; 
 
    font-weight: 100; 
 
    list-style: none; 
 
    position: static; 
 
    display : inline-block; 
 
    vertical-align : bottom; 
 
    width :20%; 
 
} 
 

 
#image { 
 
    width:60%; 
 
    display:inline-block; 
 
} 
 

 
#contacts { 
 
    margin : 0 auto; 
 
    width : 50%; 
 
}

<div id="contacts"> 
 
<ul id="contactsul"> 
 
    <li>Apple</li> 
 
    <li>Banana</li> 
 
    <li>Fruit</li> 
 
    <li>Meat</li> 
 
</ul> 
 
<img src="http://res.freestockphotos.biz/pictures/9/9552-a-green-apple-on-a-dark-background-pv.jpg" id="image"> 
 

 
</div>

出典

2016-09-16 10:22:07 QApps

私は今質問を更新しました。今は動作していますが、あなたのやり方は似ていますが、私は画面の中央に集中する必要があります。私はマージンで試した：0自動しかし、それは動作しません... – alberto96

ちょっと、ここにあなたが欲しいものの新しい答えは、divは今整列 – QApps

私は別の可能な解決策を追加しました良い答えとして – QApps

だけのdiv indide 2つの要素を取ります。のondeイメージと別のテキスト。

float: right to img

とパディングまたはマージントップを与えることによって、下にテキストを調整

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div.a{margin:140px; 
width:500px; 

} 
img { 
    float: right; 
} 
div.b{ 
width:48%; 
padding-top:90px; 

} 
</style> 
</head> 
<body> 


<div class="a"> 
<img src="yourimage" width=50% height=50% /> 
<div class="b">add text what you want here. 
adjsut padding and margin suitable for your requirement</div> 


</div> 

</body> 
</html>

あなたの元のHTML構造を取ると、複数の方法

出典

2016-09-16 10:26:54

によってこれを行うことができ、これはあなたのために動作します：

を

HTML

<div class="wrapper"> 
    <ul class="list"> 
    <li> Item 1 </li> 
    <li> Item 2 </li> 
    <li> Item 3 </li> 
    </ul> 
    <img src="http://www.qqxxzx.com/images/apple-picture/apple-picture-10.jpg"/> 
</div>

CSS

body { 
    background:#fff; 
} 
.wrapper img { 
    display:inline-block; 
} 
.wrapper .list { 
    display:inline-block; 
    margin:0; 
    padding:0; 
    style-type:none; 
}

はjsfiddleでそれを参照してください：https://jsfiddle.net/x9wLqfry

は、それが少しお役に立てば幸いです。

出典

2016-09-16 10:31:57 codelock

段落を画像の左下に揃える方法は？

答えて

関連する問題