自动边距不会将div中的元素居中

时间：2022-11-10 15:11:27

Lately I was creating a searchbox for my website, but I wanted it to be constantly centered in every y and x dimension.

最近我正在为我的网站创建一个搜索框，但我希望它能够始终集中在每个y和x维度。

I have div container searchbox:

我有div容器搜索框：

.searchbox {
  position: absolute;
  text-align: center;
  width: 100%;
  left: 0%;
  top: 55px;
  height: 115px;
  background-color: black;
}

Inside searchbox container, I made special mover container:

在搜索框容器内，我制作了特殊的移动容器：

.mover {
  margin: 0 auto;
  width: 50%;
}

As you see width is 50% because I thought it would center it, but it didn't, and margin is automatic, which I don't think even works without 50% width.

正如你所看到的宽度是50％，因为我认为它会使它居中，但它没有，并且边距是自动的，我认为即使在没有50％宽度的情况下工作也是如此。

Full code and Result.

完整代码和结果。

I think my style is kinda messed up and there are useless things which may affect automatic margin. What may the problem be? does margin: auto; doesn't work with current position of div? What do I need to change? If not, what's the problem?

我认为我的风格有点乱，有些无用的东西可能会影响自动保证金。问题可能是什么？保证金：自动;不适用于div的当前位置？我需要改变什么？如果没有，问题是什么？

I will be very thankful if you upload solution on my current fiddle.

如果你在我当前的小提琴上传解决方案，我将非常感激。

3 个解决方案

#1

1  

UPDATED ANSWER

Here is correct code: https://jsfiddle.net/uda77168/7/

这是正确的代码：https：//jsfiddle.net/uda77168/7/

First...

1. Removed all absolute, top, left, right, bottom CSS properties.
Reason: Absolute positioning is generally a bad thing to do, because it gives sites an unresponsive layout.
2. I've also removed float CSS properties.
Reason: float is not bad, but it's unnecessary if you're using flexbox.
3. Set .search {width: 100%}
Reason: make the search bar bigger.
4. Removed width properties for #condition and #stattrack.
5. Made the margins more consistent.
6. Placed <label> before <select>.

1.删​​除所有绝对，顶部，左，右，底部CSS属性。原因：绝对定位通常是一件坏事，因为它给网站提供了无响应的布局。我还删除了浮动CSS属性。原因：浮动也不错，但如果您使用的是flexbox，则不需要。 3.设置.search {width：100％}原因：使搜索栏更大。 4.删除了#condition和#stattrack的宽度属性。 5.使边距更加一致。 6.在

Center Vertically

1. <body> is the flexbox that will center things vertically. In order for that to work, the width and height for <html> and <body> have to be defined.

1. 是将垂直居中的flexbox。为了使其工作，必须定义和的宽度和高度。

html, body {
    width:100%;
    height:100%;
}
body {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

2. Next, we need to define <body> as a flexbox and give it some flexbox properties:

2.接下来，我们需要将定义为flexbox并为其提供一些flexbox属性：

body {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

You can just copy-paste flexbox code like the one above from here.

你可以从这里复制粘贴上面的Flexbox代码。

Center Horizontally

1. Create a div around .statbox, .conbox, and .rarbox, and give it a width and make it a flexbox (again, the flexbox code is copied):

1.在.statbox，.conbox和.rarbox周围创建一个div，并给它一个宽度并使其成为一个flexbox（同样，复制Flexbox代码）：

<div class="horizontal-flexbox"></div>

.horizontal-flexbox {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

2. I've also set .statbox, .conbox, and .rarbox each to be 33.3% width long. Added together, that's 99.9% – just under 100%.

2.我还将.statbox，.conbox和.rarbox设置为33.3％宽。加在一起，这是99.9％ - 略低于100％。

.horizontal-flexbox > div {
   width: 33.3%;
   margin-top: 10px;
}

3. I've also included some other stuff, but that's not important. Make sure you learn flexbox, it's real useful!

我还包括了其他一些东西，但这并不重要。确保你学习flexbox，它真的很有用！

#2

1  

Your input.search class has a specified width in px which is larger than the container.

您的input.search类在px中具有指定的宽度，该宽度大于容器。

.search {
    width: 100%;/*changed this line*/
    height: 35px;
    margin-top: 20px;
    margin-left: 0 auto;
    margin-right: 0 auto;
    border: solid 1px black;
    border-radius: 7px;
}

However using percentages can lead to unpredictable layouts when viewed on different screen resolutions.

但是，在不同的屏幕分辨率下查看时，使用百分比可能会导致不可预测的布局。

#3

0  

Use this:

用这个：

.searchbox {
    display:flex;
    display:-webkit-flex;
    justify-content:center;
    -webkit-justify-content:center;
    align-items:center;
    -webkit-align-items:center;
}

And

和

.mover{width:50%;}

#1

1  

UPDATED ANSWER

Here is correct code: https://jsfiddle.net/uda77168/7/

这是正确的代码：https：//jsfiddle.net/uda77168/7/

First...

1. Removed all absolute, top, left, right, bottom CSS properties.
Reason: Absolute positioning is generally a bad thing to do, because it gives sites an unresponsive layout.
2. I've also removed float CSS properties.
Reason: float is not bad, but it's unnecessary if you're using flexbox.
3. Set .search {width: 100%}
Reason: make the search bar bigger.
4. Removed width properties for #condition and #stattrack.
5. Made the margins more consistent.
6. Placed <label> before <select>.

1.删​​除所有绝对，顶部，左，右，底部CSS属性。原因：绝对定位通常是一件坏事，因为它给网站提供了无响应的布局。我还删除了浮动CSS属性。原因：浮动也不错，但如果您使用的是flexbox，则不需要。 3.设置.search {width：100％}原因：使搜索栏更大。 4.删除了#condition和#stattrack的宽度属性。 5.使边距更加一致。 6.在

Center Vertically

1. <body> is the flexbox that will center things vertically. In order for that to work, the width and height for <html> and <body> have to be defined.

1. 是将垂直居中的flexbox。为了使其工作，必须定义和的宽度和高度。

html, body {
    width:100%;
    height:100%;
}
body {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

2. Next, we need to define <body> as a flexbox and give it some flexbox properties:

2.接下来，我们需要将定义为flexbox并为其提供一些flexbox属性：

body {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

You can just copy-paste flexbox code like the one above from here.

你可以从这里复制粘贴上面的Flexbox代码。

Center Horizontally

1. Create a div around .statbox, .conbox, and .rarbox, and give it a width and make it a flexbox (again, the flexbox code is copied):

1.在.statbox，.conbox和.rarbox周围创建一个div，并给它一个宽度并使其成为一个flexbox（同样，复制Flexbox代码）：

<div class="horizontal-flexbox"></div>

.horizontal-flexbox {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

2. I've also set .statbox, .conbox, and .rarbox each to be 33.3% width long. Added together, that's 99.9% – just under 100%.

2.我还将.statbox，.conbox和.rarbox设置为33.3％宽。加在一起，这是99.9％ - 略低于100％。

.horizontal-flexbox > div {
   width: 33.3%;
   margin-top: 10px;
}

3. I've also included some other stuff, but that's not important. Make sure you learn flexbox, it's real useful!

我还包括了其他一些东西，但这并不重要。确保你学习flexbox，它真的很有用！

#2

1  

Your input.search class has a specified width in px which is larger than the container.

您的input.search类在px中具有指定的宽度，该宽度大于容器。

.search {
    width: 100%;/*changed this line*/
    height: 35px;
    margin-top: 20px;
    margin-left: 0 auto;
    margin-right: 0 auto;
    border: solid 1px black;
    border-radius: 7px;
}

However using percentages can lead to unpredictable layouts when viewed on different screen resolutions.

但是，在不同的屏幕分辨率下查看时，使用百分比可能会导致不可预测的布局。

#3

0  

Use this:

用这个：

.searchbox {
    display:flex;
    display:-webkit-flex;
    justify-content:center;
    -webkit-justify-content:center;
    align-items:center;
    -webkit-align-items:center;
}

And

和

.mover{width:50%;}
标签：

相关文章