Div with border and font awesome icon won’t center.

huangapple go评论75阅读模式
英文:

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:
&lt;script src=&quot;https://kit.fontawesome.com/0c86b13d40.js&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;div&gt;
&lt;p class=&quot;text title&quot;&gt;My Info&lt;/p&gt;
&lt;/div&gt;
&lt;div id=&quot;buttons&quot;&gt;
&lt;i class=&quot;fa-solid fa-house&quot;&gt; H o m e &lt;/i&gt;
&lt;/div&gt;

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:

&lt;div id=&#39;flex&#39;&gt;
  &lt;div&gt;Buttons div go in here&lt;/div&gt;
&lt;/div&gt;

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>

Div with border and font awesome icon won’t center.

英文:

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.

&lt;div style=&quot;border: 1px solid black; width: 200px; margin: 0 auto; text-align: center;&quot;&gt;
   &lt;i class=&quot;fas fa-home&quot;&gt;&lt;/i&gt;
   &lt;p&gt;Some text&lt;/p&gt;
&lt;/div&gt;

Div with border and font awesome icon won’t center.

答案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.

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en-us&quot;&gt;
&lt;head&gt;
   &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css&quot;&gt;
&lt;/head&gt;

&lt;style&gt;
  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;
  }
&lt;/style&gt;

&lt;body&gt;
&lt;div&gt; 
  &lt;p&gt;hello world&lt;/p&gt;
  &lt;button&gt; &lt;i class=&quot;fa fa-car&quot;&gt;&lt;/i&gt;&lt;/button&gt;
  &lt;/div&gt;
  
    &lt;/body&gt;
&lt;/html&gt;

huangapple
  • 本文由 发表于 2023年3月12日 08:38:51
  • 转载请务必保留本文链接:https://go.coder-hub.com/75710425.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定