Question

<!DOCTYPE html>
<html>

<head>
    <title>FirstProject</title>
</head>

<body>
    <div style="width: 800px;border:solid red 15px;background-color: blue;color:white; margin:0 auto " >
        <h1 style="margin: 10px;padding:15px;background-color: black;color:blue;border:solid yellow 5px" align="center">MY FIRST WEBPAGE</h1>
        <p style="padding:10px;background-color: green;font-size: 40px;font-family: cursive;"align="center">Technology used is HTML and CSS.</p>
        <img src="image.png" alt="image.png"/>
        <a href="http://google.com" style="font-size: 60px;color:white" align="center">Google</a>
    </div>
</body>

</html>

为什么我没有让Google位于区块的中心[{3}}

Answer 1

如果你希望div中的内容居中，你可以使用text-align:center; 在你的div。

但我不推荐这个！

我建议您使用更多div来重构代码

<body>
<div style="width: 800px;border:solid red 15px;background-color: blue;color:white; margin:0 auto " >
    <div>
          <h1 style="margin: 10px;padding:15px;background-color: black;color:blue;border:solid yellow 5px" align="center">MY FIRST WEBPAGE</h1>
    </div>
    <div>
           <p style="padding:10px;background-color: green;font-size: 40px;font-family: cursive;"align="center">Technology used is HTML and CSS.</p>
    </div>
    <div>
           <img src="image.png" alt="image.png"/>
           <a href="http://google.com" style="font-size: 60px;color:white" align="center">Google</a>
     </div>
</div>

将所有内容分开可以让您更好地控制元素，并且可以使用text-align:center;将div内容置于中心位置。但对于问题text-align：中心在外部div将解决你的问题！

ALIGN =＆＃34;中心＆＃34;不会将文本与块的中心对齐。为什么？

1 个答案: