html怎么让几个对齐方式不同的超链接在同一行？

用flex布局最方便，省去很多麻烦在父元素里设置：display:flexalign-items: centerE10以上才支持flex，如果要兼容各浏览器，最好查一下兼容模式的写法

HTML CSS中实现DIV中的图片水平垂直居中对齐的方法：

所谓的图片水平垂直居中就是把图片放在一个容器元素中（容器大于图片尺寸或是指定了大小的容器），并且图片位居此容器正中间（中间是指元素容器的正中间），而图片不是以背景图片（background-image）形式展示，是以<img>元素形式展示的。如下图所示：

1、解决水平居中的办法：如果图片左浮动并且"display:inline"时，只要给图片设置一个"text-align:center"属性，就顺利解决了水平居中。

2、解决垂直居中的办法：使用display:table-cell和设置了display:inline-block的线合span。

完整例子：

html代码：

<ul class="imgWrap clearfix">

<li><a href="#" class="imgBox"><span></span><img src="images/img1.jpg" alt="" /></a></li>

<li><a href="#" class="imgBox"><span></span><img src="images/img2.jpg" alt="" /></a></li>

<li><a href="#" class="imgBox"><span></span><img src="images/img3.jpg" alt="" /></a></li>

<li><a href="#" class="imgBox"><span></span><img src="images/img4.jpg" alt="" /></a></li>

</ul>

css代码：

<style type="text/css">

.imgWrap li {

float: left

border: solid 1px #666

margin: 10px 10px 0 0

list-style: none

border-collapse: collapse

}

.imgWrap a {

background: #ffa url(images/gridBg.gif) repeat center

width: 219px

height: 219px

display: table-cell/*图片容器以表格的单元格形式显示*/

text-align: center/* 实现水平居中 */

vertical-align: middle/*实现垂直居中*/

}

.imgWrap a:hover {

background-color: #dfd

}

.imgWrap img {

border: solid 1px #66f

vertical-align: middle/*图片垂直居中*/

}

</style>

实现效果如下：

---