(HTML, CSS) text-align : center 不工作<div>
[英](HTML, CSS) text-align : center is not working on <div>
问题描述
我使用 text-align:center 将三个分区居中，但它们都在左侧对齐。 有人告诉我，因为这三个元素都是块状的，所以它们不会居中。但是，我尝试添加 display:inline-block，但是当我检查页面时，它仍然显示 display:block。
这是我的代码：
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.Google-logo {
width: 250px;
}
.Google-search-box {
font-size: 13px;
padding-left: 15px;
height: 30px;
width: 460px;
border-radius: 15px;
border-style: solid;
border-color: rgb(160, 157, 157);
box-shadow: 0 1px 6px rgb(183, 181, 181);
margin-top: 15px;
}
.div {
text-align: center;
}
</style>
</head>
<body>
<div>
<img
class="Google-logo"
src="images/Google_2015_logo.svg.png"
alt="Google logo"
/>
</div>
<div>
<input
class="Google-search-box"
type="text"
placeholder="Search Google or type a URL"
/>
</div>
<div>
<button class="left-button">Google Search</button>
<button class="right-button">I'm Feeling Lucky</button>
</div>
</body>
</html>
2 个解决方案
解决方案1
5 2022-07-04 15:15:02
很简单，
div不是一个类，是一个 html 元素，所以这样做；
CSS
div {
text-align: center;
}
解决方案2
1 已采纳 2022-07-04 15:31:40
你可以通过多种方式做到这一点，最简单也是第一种方式是编写一个 CSS，如：
div {
text-align: center
}
如果您想在 HTML 代码本身中使用内联 CSS，则第二种方法是：
<div style="text-align:center">
第三种方法是您尝试使用 classes/id 来做的事情，因为您需要更改 HTML 和 CSS 代码：
*上课
HTML：
<div class="center"> </div>
CSS：
.center {
text-align: center,
}
*用于身份证
HTML：
<div id="center"> </div>
CSS：
#center {
text-align: center,
}
最重要的是 div 不是一个类，它是一个 HTML 标签，所以你的代码不起作用，因为你使用了
.div {
text-align: center,
}
在您的 CSS 代码和. 象征着一个类，而如果你像这样写它，它会起作用，因为它会给你代码中存在的所有 div 提供文本中心
div {
text-align: center,
}
但我觉得你应该使用类并在 div 中居中文本，以便它可以特定于你想要居中文本的 div，因此尝试优先考虑第二种或第三种方式而不是第一种方式。
text-align：center不使用div元素
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.