英文:
Div with border and font awesome icon won't center
问题
以下是翻译好的部分：
"我正在尝试制作一个首页，但找不到使 div 居中的方法，我很难解释，所以图片可能有所帮助。
我试图修复的代码段
我尝试将 div 的 text-align 设置为 center，但它只将文本居中显示在 div 中，我希望它像上面的文本一样将 div 居中显示。
HTML:
<script src="https://kit.fontawesome.com/0c86b13d40.js" crossorigin="anonymous"></script>
<div>
<p class="text title">My Info</p>
</div>
<div id="buttons">
<i class="fa-solid fa-house"> H o m e </i>
</div>
CSS:
为什么这不显示
.title {
font-size: 350%;
margin-top: 100px;
}
.text {
text-align: center;
}
#buttons {
text-align: center;
width: 130px;
border: 2px solid;
padding: 10px;
border-radius: 25px;
}
如果您有任何其他问题，请随时提出。
英文:
I am trying to make a homepage of some sorts and I can't find a way to make a div center, I can't really explain it good so the picture might help
The piece of code I'm trying to fix
I tried putting text-align: center; for the div but it only centered the text in the div, I wanted it to center the div just like the text above.
HTML:
<script src="https://kit.fontawesome.com/0c86b13d40.js" crossorigin="anonymous"></script>
<div>
<p class="text title">My Info</p>
</div>
<div id="buttons">
<i class="fa-solid fa-house"> H o m e </i>
</div>
CSS:
.title {
font-size: 350%;
margin-top: 100px;
}
.text {
text-align: center;
}
#buttons {
text-align: center;
width: 130px;
border: 2px solid;
padding: 10px;
border-radius: 25px;
}
</details>
# 答案1
**得分**: -1
你可以使用 `flex` 显示属性。将按钮包裹在一个设置为 `flex` 的 div 内：
```html
<div id='flex'>
<div>按钮放在这里</div>
</div>
然后使用以下 CSS：
div#flex {
display: flex;
justify-content: center;
}
注意：text-align 仅对 div 内容本身起作用。
英文:
You can use the flex display property.
Wrap the buttons inside a div set to flex:
<div id='flex'>
<div>Buttons div go in here</div>
</div>
Then use this CSS:
div#flex {
display: flex;
justify-content: center;
}
FYI text-align only works on content within the div itself.
答案2
得分: -1
CSS属性margin: 0 auto; 可以用于水平居中一个div。通过将左右外边距设置为auto，div将在其父容器内水平居中。
<div style="border: 1px solid black; width: 200px; margin: 0 auto; text-align: center;">
<i class="fas fa-home"></i>
<p>一些文本</p>
</div>
英文:
CSS property margin: 0 auto; can be used to center a div horizontally. By setting the left and right margins to auto, the div will be centered horizontally within its parent container.
<div style="border: 1px solid black; width: 200px; margin: 0 auto; text-align: center;">
<i class="fas fa-home"></i>
<p>Some text</p>
</div>
答案3
得分: -1
可能是因为它们不在相同的
<!DOCTYPE html>
<html lang="en-us">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
button {
width: 200px;
padding: 5px;
background-color: lightcoral;
border-radius: 5px;
color: white;
font-size: 20px;
}
button:hover {
background-color: lightblue;
}
div {
text-align: center;
}
</style>
<body>
<div>
<p>hello world</p>
<button> <i class="fa fa-car"></i></button>
</div>
</body>
</html>
英文:
It might be because they are not inside the same div?
It would be helpful if you could upload some code here but this code works too.
<!DOCTYPE html>
<html lang="en-us">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
button {
width: 200px;
padding: 5px;
background-color: lightcoral;
border-radius: 5px;
color: white;
font-size: 20px;
}
button:hover {
background-color: lightblue;
}
div {
text-align: center;
}
</style>
<body>
<div>
<p>hello world</p>
<button> <i class="fa fa-car"></i></button>
</div>
</body>
</html>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
- 本文由 huangapple 发表于 2023年3月12日 08:38:51
- 转载请务必保留本文链接：https://go.coder-hub.com/75710425.html
- css
- font-awesome
- html
- text
评论