logo标签列表

如何使用CSS使一个div居中对齐，另一个div向右浮动？

css
5

我想让我的div2居中对齐，div3在右侧。

What is expected

我尝试使用 text align: center 设定主 DIV，并将 float right 设定为 DIV3，但这会使其在考虑主 DIV 的剩余部分时居中对齐。我已经给主 DIV 设定了 display: inline-flex。

What is happening

<div style="height: 40px;width:120px;background-color: yellow;align-items: center;">

<div style="height: 20px;width:20px;background-color: red;">
  Hello
</div>

<div style="height: 20px;float: right;width:20px;background-color: red;">
</div>
</div>

我们需要代码。请展示一下你目前尝试过的内容。 - Patrick Mlr
当您需要在div中心设置div的宽度时，可以使用以下代码： - Suresh Suthar
请访问我昨天回答的以下代码。[https://dev59.com/VKDia4cB1Zd3GeqPMPYl#43450339] - chirag solanki
但是如果在小屏幕上两个div开始重叠，这样可以吗？浮动的一个优点就是避免重叠。 - Mr Lister
7个回答
6
请使用以下代码进行尝试：
<div style="height: 40px;width:120px;background-color: yellow;align-items: center; position:relative;">

<div style="height: 20px;width:40px;background-color: red; overflow:auto; margin:0 auto">
  Hello
</div>

<div style="height: 20px;position:absolute; right:0px; top:0px; width:20px;background-color: red;">
</div>
</div>
1
将style="margin: auto;"添加到您的div2元素。并且将style="margin-left: auto;"添加到您的div3元素。 

<div style="height: 40px;width:120px;background-color: yellow;align-items: center;">

<div style="margin:auto; height: 20px;width:20px;background-color: red;">
  Hello
</div>

<div style="margin-left:auto; height: 20px;float: right;width:20px;background-color: red;">
</div>
</div>

它确实可以工作，但是它给我返回的结果如我所附上的第二张图片。我希望div2考虑到主div的宽度并居中对齐。现在它只考虑到宽度=主div-div3，然后居中对齐，这不是预期发生的情况。 - shahista inamdar
我已经编辑了答案并添加了代码片段。根据这个，你需要做哪些更改？ - Chathurika Senani
1

.main {
  display: block;
  position: relative;
  width:100%;
  text-align: center;
  border: 1px solid red;
}
.main .div1 {
  display: inline-block;
  border: 1px solid;
}
.main .div2 {
  float: right;
  border: 1px solid;
  display: inline-block;
}
<div class="main">
  <div class="div1">
    div1
  </div>
  <div class="div2">
    div2
  </div>
</div>

1
你可以在主要元素上使用position:relative，并在其他div上使用position:absolute，这也会使其垂直居中。 

.main {
  text-align: center;
  background-color: red;
  height: 50px;
  position: relative;
}

.div2 {
  background-color: blue;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.div3 {
  background-color: green;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
}
<div class="main">
  <div class="div2">SOME DIV 2</div>
  <div class="div3">SOME DIV 3</div>
</div>

它对我起作用了。谢谢。 - shahista inamdar
1

.contentmain{
    background: white none repeat scroll 0 0;
      color: black;
      height: auto;
      width: 35%;
      float: left;
      background:red;
  }
  .contentCenter{
    background: white none repeat scroll 0 0;
      color: black;
      height: auto;
      width: 30%;
      float: left;
      background:yellow;
  }
  .contentRight{
    background: white none repeat scroll 0 0;
      color: black;
      height: auto;
      width: 35%;
      float: right;
      background:red;
  }
<div class="contentmain">
  Main<br/>
  Content<br/>
 </div>
 <div class="contentCenter">
  Center<br/>
  Content<br/>
 </div>
 <div class="contentRight">
  Right<br/>
  Content<br/>
 </div>

这可能符合您的要求。
1
元素是块级元素，因此您可以在左右使用margin:auto将其放置在中间。
.center {
  margin: 0 auto;
}

.right {
  float: right;
}

在HTML中，您需要调整div的顺序。将第3个div放在第2个div之前，这样当您浮动它们时，它们会出现在同一行上：
<div class="outer">
    <div class="right"></div>
    <div class="center"></div>
</div>

https://jsfiddle.net/dcqpw12u/1/

1
<!DOCTYPE html>
<head>
<style>
.div0 {
  text-align: center;
  border-style: solid;
  border-width: 5px;
  height: 50px;
  border-color: red;
  position: relative ;
}
.div1 {
  border-style: solid;
  border-width: 4px;
  right: 0%;
  height: 40px;
  width:40px;
  border-color: green;
  position: absolute;
 }

 .div2 {
  left: 50%;
  right:50%;
  width:40px;
  position: absolute;
  border-style: solid;
  height: 40px;
  border-width: 4px;
  border-color: green;
    }
</style>            
</head>
<body>
<div class="div0">
  <div class="div1"><p>div1</p></div>
  <div class="div2"><p>div2</p></div>
</div>  

</body>
</html>

基本上，您可以通过使用CSS的position属性和right和left属性来实现此目的，您可以在Position和right属性上查看更多信息，left属性可以在该网站上找到。
我的答案中所做的是将主div设置为相对位置relative，将其他子div（div2和div3）设置为absoulute 要将一个div放置在最右侧，您需要将其right属性设置为0％， 要使一个div居中，我在right和left属性上都使用了50％。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接