我的图片不会水平对齐

我不能让我的div小号水平使用display: inline;我的图片不会水平对齐

这是我的代码内联：

<div class = "links"> 
    <ul> 
     <div id = "twitter"> 
     <a href = "#"> 
      <li><img src="images/twitter.png" /> </li> 
     </a> 
     </div> 
     <div id = "facebook"> 
     <a href = "#"> 
      <li><img src="images/facebook.ico" /></li> 
     </a> 
     </div> 
    </ul> 
</div>

这是我的CSS：

我已经告诉它是并且它保持垂直内嵌

#facebook img { 
    padding: 10px; 
    height: 100px; 
    width: 100px; 
} 
#twitter img { 
    padding: 10px; 
    height: 100px; 
    width: 100px; 
} 
.links ul li { 
    display: inline; 
} 
.links ul { 
    background-color: rgb(0, 125, 210); 
    float: center; 
}

来源

2015-11-03 Georgina Beckett

注意，[只有一个'li'可以的'ul'子（https://developer.mozilla.org/en-US/docs/Web/HTML /元素/ UL）。您需要将您的标记重新设置为[有效的HTML]（https://validator.w3.org/）。 –

请标记为已接受的最佳答案 –

尝试添加flex到display财产.links ul：

.links ul { 
    background-color: rgb(0, 125, 210); 
    float: center; 
    display: flex; 
}

来源

2015-11-03 18:39:00

是的！谢谢！！！！ –

@GeorginaBeckett：不客气 –

亚德的回答是一个解决方案，我的回答是，相反，一些解释。

.links ul li { 
    display: inline; 
}

此代码将使您的列表元素内联。他们全部0。您正在使用div元素，而这些元素不会被您的CSS规则找到。您可以更改规则或HTML，但您希望以某种方式将CSS规则应用于正确的元素类型。（Michael_B是对的，ul里面的非li是无效的HTML）

来源

2015-11-03 18:46:37 Katana314

呵呵。有人低估了我的答案和Jad的，但我不知道为什么。 – Katana314

你需要设置#facebook, #twitter{display:inline-block}。就这样。

#twitter img, 
 
#facebook img { 
 
    padding: 10px; 
 
    height: 60px; 
 
    width: 60px; 
 
} 
 
#twitter, 
 
#facebook { 
 
    display: inline-block; 
 
} 
 

 
.links ul { 
 
    background-color: rgb(0, 125, 210); 
 
}

<div class="links"> 
 
    <ul> 
 
    <div id="twitter"> 
 
     <a href="#"> 
 
     <li> 
 
      <img src="http://cdn.business2community.com/wp-content/uploads/2015/07/Twitter-icon.png.png" /> 
 
     </li> 
 
     </a> 
 

 
    </div> 
 
    <div id="facebook"> 
 
     <a href="#"> 
 
     <li> 
 
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" /> 
 
     </li> 
 
     </a> 
 

 
    </div> 
 
    </ul> 
 
</div>

来源

2015-11-03 18:51:58 CodeRomeos

我的图片不会水平对齐

回答

相关问题