我将以下代码用于简单的图片库(http://w3schools.com中找到的实际代码,它完美无缺)。编辑css后,文本的对齐方式已更改。我想将文本对齐在中心。有人知道答案,请帮助我。
我的HTML代码:
<html>
<body>
<div id="d">
<div class="img">
<a target="_blank" href="klematis_big.htm">
<img src="a.jpg">
</a>
<div class="desc">
Add a description of the image here </div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm">
<img src="a.jpg">
</a>
<div class="desc">
<p>
Add a description of the image here</p>
</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm">
<img src="a.jpg">
</a>
<div class="desc">
Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm">
<img src="a.jpg">
</a>
<div class="desc">
<p>
Add a description of the image here</P>
</div>
</div>
<div class="img">
<a target="_blank" href="klematis_big.htm">
<img src="a.jpg">
</a>
<div class="desc">
Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm">
<img src="a.jpg">
</a>
<div class="desc">
Add a description of the image here</div>
</div>
</div>
</body>
</html>
我的CSS代码:
#d
{
width : 660;
border:1px;
}
.img
{
margin:3px;
border:1px solid #0000ff;
height:200;
width:200;
float:left;
text-align:center;
}
.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
width:100;
height : auto;
}
.img a:hover img
{
border:2px solid #0000ff;
}
.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}
截图:
答案 0 :(得分:4)
删除div的宽度。
.desc {
text-align: center;
font-weight: normal;
margin: 2px;
}
并将其更改为text-align。属性align不存在。
答案 1 :(得分:2)
试试这个:
.desc{
margin: 0 auto;
}
答案 2 :(得分:2)
你必须修改margin属性的值:
.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px auto;
}
此部分还缺少哈希符号:
<style>
d
{
width : 660;
border:1px;
}
必须像这样进行修改:
<style>
#d {
width : 660;
border:1px;
}
答案 3 :(得分:1)
将css更改为
.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}
将align:center;
更改为text-align:center;
答案 4 :(得分:0)
.detail
{
文字对齐:居中;
font-weight:normal;
保证金:0自动;
}