使用css将文本居中对齐答案

【问题标题】：Align text in center using css使用css将文本居中对齐
【发布时间】：2019-12-03 15:24:03
【问题描述】：

我将以下代码用于简单的图片库（在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;
}

截图：

【问题讨论】：

标签： html css image web

【解决方案1】：

移除 div 的宽度。

.desc {
  text-align: center;
  font-weight: normal;
  margin: 2px;
}

并将其更改为text-align。属性 align 不存在。

【讨论】：

【解决方案2】：

试试这个：

.desc{
margin: 0 auto;
}

【讨论】：

【解决方案3】：

你必须修改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;
}

【讨论】：

【解决方案4】：

把css改成

.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}

将align:center; 更改为text-align:center;

【讨论】：

请检查你的 CSS，在 .img 中为高度和宽度添加 'px' 值，例如 .img{height:200px;width:200px;}

【解决方案5】：

.detail
{
文本对齐：居中；
字体粗细：正常；
边距：0 自动；
}

【讨论】：