如何將段落與圖像的左下角對齊？

-2

我希望得到的結果如下圖中顯示，水平居中，就在導航欄的下方。如何將段落與圖像的左下角對齊？

這是我的代碼，現在，我想，但我不管理中心在div ... 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">

我怎麼能這樣做？

來源

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球鐵QT500。 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>

您可以通過多種方式

來源

2016-09-16 10:26:54

以你原來的HTML結構做到這一點，這會爲你工作：

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

如何將段落與圖像的左下角對齊？

回答

相關問題