如何将段落对齐到图像的左下角？答案

【问题标题】：How to align a paragraph to the bottom-left of an image?如何将段落对齐到图像的左下角？
【发布时间】：2017-01-24 12:20:36
【问题描述】：

我想得到如下图所示的结果，水平居中，就在导航栏的下方。

这是我现在的代码，我试过了，但我无法将 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">

我该怎么做？

【问题讨论】：

标签： html css image position

【解决方案1】：

解决方案 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>

【讨论】：

我刚刚更新了我的问题，现在它可以工作了，你的方式也很相似，但我需要在屏幕中间居中。我已经尝试使用 margin: 0 auto 但它不起作用...
嘿，这是你想要的新答案，现在 div 对齐了
我添加了另一个可能的解决方案，如果这是答案，请将其标记为最佳答案
@alberto96 这是答案
第一个不是 100% 精确居中，但结果相似 :)

【解决方案2】：

只需在 div 中取两个元素。 onde 图像和另一个文本。

float: right to img

并通过提供 padding 或 margin-top 将文本调整到底部

 <!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>

您可以通过多种方式做到这一点

【讨论】：

【解决方案3】：

采用你原来的 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

希望对你有所帮助。

【讨论】：