Aligining圖標和文字就像一個正確外觀的列表點 - 如何？

我需要以下代碼的幫助。我超新，剛剛學習HTML和CSS。那麼可以說我還在學習。我希望顯示此圖標，並在其旁邊顯示文本。問題是ico）沒有正確對齊文本。正如你所看到的（圖片）文本沒有正確對齊。我希望有一個人可以幫助我。先謝謝你。Aligining圖標和文字就像一個正確外觀的列表點 - 如何？

issue - german web page

<html> 
 
<title> 
 
Was wir anbieten 
 
</title> 
 
<body> 
 
<style> 
 
img{ 
 
position: relative; top: 25px;} 
 
</style> 
 

 
<p> 
 

 
<h2> 
 

 
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAADsUlEQVR4nO3aS4gcVRTG8TsTgjMxCCoYo1ExulCjLjRCGElwISooLgRF1JWjIaIYooIQH5gsghtfIBoiAWeCCLoRxYX4IAjqJkpEXWlAUUQUQWMyMer0z0VVOzVl3X5NV3dPT/2hF9P3u4dzvuqpOvfWDaGioqKioqKiYgDBJjyMLTi13/n0DIzjdfP5BTf0O7eegOcUcxjn9ju/UsEYjkUMgB39zrFUcFaD4uHlfudYKji7iQFT/c6xNHAS3l2SBmAVPmlS/PAZgBFsxm8tFD9cBuBMvNFi4cNjAM7DNP5qs/jFbQBW41nMdFD44jQAo7gWr+H4Agrv2ACsxc162UViPZ7CD10oumMD8Dhm07k17Cyj2DFcjSckz/E/ulx0RwbgskiMG/PCk3E9NmKkSdDVabFbsQcf4fcSC85TaABWYGXuu8lIjEMYq4suxU+ZwTcxgVsla/EX8Da+wtGSimqHqVyRJ0guxHH8g30YT8eubBDnznqAZq3noJE34OkCzXRm/MNInI/rgp9LS7Uc8gZ8U6CpYUM6fkX6dxEXBK23oINC3oADEd2rGc37Ec29QW9vYN0gb8DmiO5PrEg1d0c000G5j6wyyBuwHN9GtFelmosj4wcDjpSRZYn87zGI5yPae9LxZeaaoSzfBwvry/tBkQFbI9rHMppfC8ZngsYbkINIkQEPRrSPZDRFN/sjQXcWKL2kyIDdEe2WzH2i6FH4XcDfZWVaEvmb4ErFP2+YSDWxNcGnQdI+LibyBtwX0c2Ya4nvj2j2BvEuaVDJG/BlRLcvo/ksopkcBgOK9htmcXk6vikSp4bzA74uKdGyyBvwYoFmTzo2is8jcfbXA9xufpMQ6wyPNRjrJXkDxiVL4FnJ/WzK3P/+dQ3i3JYNMiHZvnoA6yITjuI0yaurayTNx27s19sVZWxDZAwn5r6LNUgHsawoTn3ij5GJ70jdzWiXS65Ar2hnS2yiYH4NG5tN3NUggUPYjlvwEL5ooD1g/m5TN2h3U3SXuRv9LLa3Mul0C18jzGCN5Bdyk2RbrRs9Ryfb4hdJtsUvbGfSXQtMdFtBzDWSK7KQvcXevRjBMx0muRejDeKegZd09ovo7ZshPKr19cIsdjQqPhd7HT4YaAPSRC/BWw2MqOE9rO8g9ojkGNzhgTUgk+wq3IGdeDL9TGJtF2KfI77BORgGlI3kJccrS9aAEJb4IakQqmNy1UHJEJb4UdkQqsPS/4EN2CZ59J7S73wqKioqKioqhot/AedCJIQMIKG9AAAAAElFTkSuQmCC"/> &nbsp; Ihre gewünschte Werbekampagne 
 
    </h2> 
 
    </p> 
 
    
 
    <p> 
 
    <h2> 
 
    
 
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAACR0lEQVR4nO3aP2sTcRzH8aOhRDqIo4h/QBEnwcnBR+BSELQo6KwPQR+AqJsUHHRToSilurj4BBzcBC0q0oqLS2m1FRVEfTkkxSOkzf353V3S/N6QLb9PPt937i7J75IkkUgkEolEIinQxiU8wRLWuo8lLOAi2sOaXwqcw0eDWcbZYcsvDFqYzVCsl9toNZ0fQsCdAuU2mW06v+zwZ0qUg7+Ybiq/7PC7ZDsnB7Gsz4Wr6vwQAi4EKLfJTN35IQQ8Dlhwru78EAI+BCz4ru78EAK+BSy4UXd+FBBAwPuABd/WnR9CwFzAgg/rzg8hYOw/BieFOUzf6POdver8UBLG96twquSNEgWvN50fQsB4/xxOFR3PDZGekm2dq/cDLOJn97GI+ziv/JZYZflFCh3U2YtbyfDONM2Kzl7ikZIz78WjBAew2uREBVnF/gKDT+AKvkCiY3NUmc85/HG8SAck2Gikehi+Zhx8Cjfxqzcgqb1yYDIMP4PPW66vr2o1bDP4ITwbuL7yhhXTZ/AWruJ7pvWVtquBnuFP4lWu9XleoAmy9MNu3MOfPMPvCAE4rXNTtRA7QUApooAoIAqIAqKAKCAKiAJGVkD3OVO4hd/BBQw7PbJO4GWu9dXUqo8+R8wELmM90/pK29XANqfOPswPXF99xWrJcA2Zxqct18t4qAwpWTdF9+CuPvsFCZ7W3TogC1kEpEScwut0QIJjOv/UHjXWcDSPgK6ESVzDD7qnkP+3xkbhHsG6MLfGDuN5mYxIJBKJRCKjzT8YxRMTHEdMlgAAAABJRU5ErkJggg=="/> &nbsp; Professionelle Bild- und Videoaufnahemen + Bearbeitung 
 

 
    </h2> 
 

 
    </p> 
 

 
</body> 
 

 
</html>

來源

2015-11-30 Nino

您需要使用這種情況下的定位。這是固定流體的情況：

+-------+-----------+ 
| FIXED | FLUUUUUID | 
+-------+-----------+

或者

+-------+-----------+ 
| FIXED | FLUUUUUID | 
|  | FLUUUUUID | 
+-------+-----------+

固定流體模型。在我的片段中，我已經演示了兩種示例。在第一種情況下，流體的尺寸較小。而下一個內容太長了。

片段

.parent {position: relative; margin: 0 0 15px; border: 1px solid #999; padding: 5px; padding-left: 100px;} 
 
.parent .fixed {position: absolute; left: 5px; width: 90px; background-color: #99f;} 
 
.parent .fluid {background-color: #f99;}

<div class="parent"> 
 
    <div class="fixed">Fixed</div> 
 
    <div class="fluid">Fluid</div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="fixed">Fixed</div> 
 
    <div class="fluid">Fluid Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque animi placeat, expedita tempora explicabo facilis nulla fuga recusandae officia, maiores porro eaque, dolore et modi in sapiente accusamus id aut.</div> 
 
</div>

解決方案

不要加內<p>標籤其他任何標記。不是一個好主意。
請使用語義標記！

工作摘錄

.parent {position: relative; margin: 0 0 15px; padding: 5px; padding-left: 100px; min-height: 50px;} 
 
.parent .fixed {position: absolute; left: 5px; width: 90px; background-color: #99f;} 
 
.parent .fluid {}

<div class="parent"> 
 
    <div class="fixed"> 
 
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAADsUlEQVR4nO3aS4gcVRTG8TsTgjMxCCoYo1ExulCjLjRCGElwISooLgRF1JWjIaIYooIQH5gsghtfIBoiAWeCCLoRxYX4IAjqJkpEXWlAUUQUQWMyMer0z0VVOzVl3X5NV3dPT/2hF9P3u4dzvuqpOvfWDaGioqKioqKiYgDBJjyMLTi13/n0DIzjdfP5BTf0O7eegOcUcxjn9ju/UsEYjkUMgB39zrFUcFaD4uHlfudYKji7iQFT/c6xNHAS3l2SBmAVPmlS/PAZgBFsxm8tFD9cBuBMvNFi4cNjAM7DNP5qs/jFbQBW41nMdFD44jQAo7gWr+H4Agrv2ACsxc162UViPZ7CD10oumMD8Dhm07k17Cyj2DFcjSckz/E/ulx0RwbgskiMG/PCk3E9NmKkSdDVabFbsQcf4fcSC85TaABWYGXuu8lIjEMYq4suxU+ZwTcxgVsla/EX8Da+wtGSimqHqVyRJ0guxHH8g30YT8eubBDnznqAZq3noJE34OkCzXRm/MNInI/rgp9LS7Uc8gZ8U6CpYUM6fkX6dxEXBK23oINC3oADEd2rGc37Ec29QW9vYN0gb8DmiO5PrEg1d0c000G5j6wyyBuwHN9GtFelmosj4wcDjpSRZYn87zGI5yPae9LxZeaaoSzfBwvry/tBkQFbI9rHMppfC8ZngsYbkINIkQEPRrSPZDRFN/sjQXcWKL2kyIDdEe2WzH2i6FH4XcDfZWVaEvmb4ErFP2+YSDWxNcGnQdI+LibyBtwX0c2Ya4nvj2j2BvEuaVDJG/BlRLcvo/ksopkcBgOK9htmcXk6vikSp4bzA74uKdGyyBvwYoFmTzo2is8jcfbXA9xufpMQ6wyPNRjrJXkDxiVL4FnJ/WzK3P/+dQ3i3JYNMiHZvnoA6yITjuI0yaurayTNx27s19sVZWxDZAwn5r6LNUgHsawoTn3ij5GJ70jdzWiXS65Ar2hnS2yiYH4NG5tN3NUggUPYjlvwEL5ooD1g/m5TN2h3U3SXuRv9LLa3Mul0C18jzGCN5Bdyk2RbrRs9Ryfb4hdJtsUvbGfSXQtMdFtBzDWSK7KQvcXevRjBMx0muRejDeKegZd09ovo7ZshPKr19cIsdjQqPhd7HT4YaAPSRC/BWw2MqOE9rO8g9ojkGNzhgTUgk+wq3IGdeDL9TGJtF2KfI77BORgGlI3kJccrS9aAEJb4IakQqmNy1UHJEJb4UdkQqsPS/4EN2CZ59J7S73wqKioqKioqhot/AedCJIQMIKG9AAAAAElFTkSuQmCC"/></div> 
 
    <div class="fluid">The Text</div> 
 
</div> 
 
<div class="parent"> 
 
    <div class="fixed"> 
 
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAADsUlEQVR4nO3aS4gcVRTG8TsTgjMxCCoYo1ExulCjLjRCGElwISooLgRF1JWjIaIYooIQH5gsghtfIBoiAWeCCLoRxYX4IAjqJkpEXWlAUUQUQWMyMer0z0VVOzVl3X5NV3dPT/2hF9P3u4dzvuqpOvfWDaGioqKioqKiYgDBJjyMLTi13/n0DIzjdfP5BTf0O7eegOcUcxjn9ju/UsEYjkUMgB39zrFUcFaD4uHlfudYKji7iQFT/c6xNHAS3l2SBmAVPmlS/PAZgBFsxm8tFD9cBuBMvNFi4cNjAM7DNP5qs/jFbQBW41nMdFD44jQAo7gWr+H4Agrv2ACsxc162UViPZ7CD10oumMD8Dhm07k17Cyj2DFcjSckz/E/ulx0RwbgskiMG/PCk3E9NmKkSdDVabFbsQcf4fcSC85TaABWYGXuu8lIjEMYq4suxU+ZwTcxgVsla/EX8Da+wtGSimqHqVyRJ0guxHH8g30YT8eubBDnznqAZq3noJE34OkCzXRm/MNInI/rgp9LS7Uc8gZ8U6CpYUM6fkX6dxEXBK23oINC3oADEd2rGc37Ec29QW9vYN0gb8DmiO5PrEg1d0c000G5j6wyyBuwHN9GtFelmosj4wcDjpSRZYn87zGI5yPae9LxZeaaoSzfBwvry/tBkQFbI9rHMppfC8ZngsYbkINIkQEPRrSPZDRFN/sjQXcWKL2kyIDdEe2WzH2i6FH4XcDfZWVaEvmb4ErFP2+YSDWxNcGnQdI+LibyBtwX0c2Ya4nvj2j2BvEuaVDJG/BlRLcvo/ksopkcBgOK9htmcXk6vikSp4bzA74uKdGyyBvwYoFmTzo2is8jcfbXA9xufpMQ6wyPNRjrJXkDxiVL4FnJ/WzK3P/+dQ3i3JYNMiHZvnoA6yITjuI0yaurayTNx27s19sVZWxDZAwn5r6LNUgHsawoTn3ij5GJ70jdzWiXS65Ar2hnS2yiYH4NG5tN3NUggUPYjlvwEL5ooD1g/m5TN2h3U3SXuRv9LLa3Mul0C18jzGCN5Bdyk2RbrRs9Ryfb4hdJtsUvbGfSXQtMdFtBzDWSK7KQvcXevRjBMx0muRejDeKegZd09ovo7ZshPKr19cIsdjQqPhd7HT4YaAPSRC/BWw2MqOE9rO8g9ojkGNzhgTUgk+wq3IGdeDL9TGJtF2KfI77BORgGlI3kJccrS9aAEJb4IakQqmNy1UHJEJb4UdkQqsPS/4EN2CZ59J7S73wqKioqKioqhot/AedCJIQMIKG9AAAAAElFTkSuQmCC"/></div> 
 
    <div class="fluid">A longer text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus magni ipsam facilis laboriosam nesciunt eveniet obcaecati dicta laborum voluptatem reiciendis, possimus vel enim. Dignissimos assumenda ipsa aut. Facere, unde animi.</div> 
 
</div>

來源

2015-11-30 16:03:46

太謝謝你了！任何機會集中「文本」，所以它不在圖片的頂部？ – Nino

是的，你可以做。只需給予「頂級：50％」，而不是沒有任何東西放在絕對位置上。 –

你的意思是.parent .fixed {position：top：50％;寬度：90px;背景顏色：＃99f;} – Nino

設置你爲「inline-block的」

img{display:inline-block}

圖像無論如何，我建議你使用「UL」，「禮」做http://www.w3schools.com/tags/tag_ul.asp

來源

2015-11-30 16:03:01

Aligining圖標和文字就像一個正確外觀的列表點 - 如何？

回答

相關問題