如何将我的文本/边框与我的页面中心对齐<div>元素？ </div><div id="text_translate"><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-css lang-css prettyprint-override"> div1 { background-color: aqua; font-family: Candara; padding: 10px; border-radius: 10px; margin: 10px; width: auto; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> <body> <div1 style="font-size: 30px; text-align: center;"> <b>Text here</b> </div1> </body></pre></div></div><p></p><p> 我正在尝试将我的边框和文本都对齐到页面的中心，但有些东西不起作用。 如果我解释得不够好，请询问更多详细信息:)。 这是代码：</p><p> <strong>HTML</strong></p><pre> <body> <div1 style="font-size: 30px; text-align: center;"> <b>Text here</b> </div1> </body></pre><p> <strong>CSS</strong></p><pre> div1 { background-color: aqua; font-family: Candara; padding: 10px; border-radius: 10px; margin: 10px; width: auto; }</pre></div>
[英]How can I align my text/border to the center of my page with the <div> element?
问题描述
div1 { background-color: aqua; font-family: Candara; padding: 10px; border-radius: 10px; margin: 10px; width: auto; }
<body> <div1 style="font-size: 30px; text-align: center;"> <b>Text here</b> </div1> </body>
I'm trying to align both my border and text to the center of my page, but somethings not working.
我正在尝试将我的边框和文本都对齐到页面的中心，但有些东西不起作用。 If I haven't explained it well enough please ask for more details:).如果我解释得不够好，请询问更多详细信息:)。 Here is the code:这是代码：
HTML HTML
<body>
<div1 style="font-size: 30px; text-align: center;">
<b>Text here</b>
</div1>
</body>
CSS CSS
div1 {
background-color: aqua;
font-family: Candara;
padding: 10px;
border-radius: 10px;
margin: 10px;
width: auto;
}
4 个解决方案
解决方案1
2 2020-06-03 05:42:25
you have some mistake in your code the tag name is div no div1 like you have there, if you change that you might see the result that you'r looking for!您的代码中有一些错误，标签名称是div no div1就像您在那里一样，如果您更改它，您可能会看到您正在寻找的结果！ I hope this help you!我希望这对你有帮助！
解决方案2
2 已采纳 2020-06-03 05:45:57
Please modify div1 to div and check again.请将div1修改为div并再次检查。
See below codes:见以下代码：
div { background-color: aqua; font-family: Candara; padding: 10px; border-radius: 10px; margin: 10px; width: auto; }
<body> <div style="font-size: 30px; text-align: center;"> <b>Text here</b> </div> </body>
解决方案3
1 2020-06-03 05:47:16
you need to set width to your body tag and horizontal margin to auto to you text also change your div1 to div您需要将宽度设置为您的body标签和水平边距自动设置为您的文本也将您的div1更改为div
body{
width: 100vw;
}
div {
background-color: aqua;
font-family: Candara;
padding: 10px;
border-radius: 10px;
margin: auto 10px;
width: fit-content;
}
解决方案4
1 2020-06-03 06:58:21
<div1> isn't a valid HTML element. <div1>不是有效的 HTML 元素。 Always use <div> and if you want to differentiate between your divs you can add an id="div1" or class="div1" attribute.始终使用<div> ，如果你想区分你的 div，你可以添加一个id="div1"或class="div1"属性。 If your component should be re-usable (multiple times on the page), then use class .如果您的组件应该可重复使用（在页面上多次使用），请使用class 。 Otherwise use id (which should be unique).否则使用id （应该是唯一的）。
I created a div.div1 selector, which selects all elements that are a <div> element with the .div1 class attribute ( class="div1" ).我创建了一个div.div1选择器，它选择具有.div1 class 属性（ class="div1" ）的<div>元素的所有元素。
And it looks like your code works as expected.看起来您的代码按预期工作。
div.div1 { background-color: aqua; font-family: Candara; padding: 10px; border-radius: 10px; margin: 10px; width: auto; font-size: 30px; text-align: center; }
<body> <div class="div1"> <b>Text here</b> </div> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.