Question

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

现在这是我的代码，我试过但是我没有设法把这个代码集中...... https://jsfiddle.net/L1drp0b7/

＆＃13;

#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%;
}

＆＃13;

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

＆＃13;

我该怎么做？

Answer 1

解决方案1：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

解决方案2：

＆＃13;

#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%;
}

＆＃13;

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

＆＃13;

Answer 2

只需要两个元素indide div。 onde图像和另一个文本。

float: right to img

并通过填充或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>

您可以通过多种方式执行此操作

Answer 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

希望它有所帮助。

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

3 个答案: