UC知道css 如何做到：两列不定宽居中
来源：百度知道 编辑：UC知道 时间：2024/05/26 18:33:08
是这样， 我想让两个span在一个div中居中显示，第一个span是一个图片，用display:block来强制显示图片，第2个span中是文字
大概布局是这样：
<div class="a">
<span class="red">
<span class="icon"> </span> <span>内容 </span>
</span>
</div>
我想让red下面那两个span并排显示在red的正中，左右居中即可，请问应该怎样设置？
我先在red里面设置了text-align:center, span是居中了，但是占了两排，我希望他们一排显示是来比如：
【 （图）内容 】， 但显示成了：
【 图
内容 】
而我为span设置float:left 之后，他们又不居中了。。。 变成了：
【（图）内容 】
求教！ 谢谢！
忘记说了，第一个span的宽度是定的，因为是张固定的图。
第2个span中的内容只有一排，像标题，但是宽度不定，所以这个比较麻烦
宽度不定 怎么加空格啊
大概布局是这样：
<div class="a">
<span class="red">
<span class="icon"> </span> <span>内容 </span>
</span>
</div>
我想让red下面那两个span并排显示在red的正中，左右居中即可，请问应该怎样设置？
我先在red里面设置了text-align:center, span是居中了，但是占了两排，我希望他们一排显示是来比如：
【 （图）内容 】， 但显示成了：
【 图
内容 】
而我为span设置float:left 之后，他们又不居中了。。。 变成了：
【（图）内容 】
求教！ 谢谢！
忘记说了，第一个span的宽度是定的，因为是张固定的图。
第2个span中的内容只有一排，像标题，但是宽度不定，所以这个比较麻烦
宽度不定 怎么加空格啊
代码如下：（兼容IE 火狐 谷歌）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>懒人建站</title>
<style>
body{
margin:0px;
padding:0px;}
.a{
width:950px;
height:auto;
display:block;
margin:0 auto;
padding:10px 0px 10px 0px;
border: 1px solid #CCCCCC;
}
.red{
width:95%;
height:auto;
display:block;
margin:0 auto;
padding:10px 0px 10px 0px;
border: 1px solid #CCCCCC;
}
.red span{