发表新帖
发表新帖

centering a div between one that's floated right and one that's floated left

后端 未结
关注
7 1177
天命终不由人
天命终不由人 2020-12-02 14:04

I have a page in which a header consists of three divs - one that\'s floated to the left, one that\'s floated to the right, and one that\'s in between them. I\'d like for th

相关标签:
7条回答
  • 鱼传尺愫
    2020-12-02 14:30

    Indeed, the important part is that the centered div come after the left and right divs in the markup. Check out this example, it uses margin-left: auto and margin-right: auto on the centered div, which causes it to be centered.

    <html>
<head>
    <style type="text/css">
        #left
        {
            float: left;
            border: solid 1px red;
        }

        #mid
        {
            margin-left: auto;
            margin-right: auto;
            border: solid 1px red;
        }

        #right
        {
            float: right;
            border: solid 1px red;
        }
    </style>
</head>

<body>
    <div id="left">
        left
    </div>

    <div id="right">
        right
    </div>

    <div id="mid">
        mid
    </div>
</body>
</html>

    Here's a JS Bin to test: http://jsbin.com/agewes/1/edit

    0 讨论(0)
  • 不知归路
    2020-12-02 14:34

    If you have two floated divs, then you know the margins. The problem is that the float:right div should be put before the middle div. So basically you will have:

    left-floated | right-floated | centered

    Now, about the margins: usually you can just use margin:0 auto, right? The problem is that right now you know the values of the margins: floated divs! So you just need to use:

    margin:0 right-floated-width 0 left-floated-width

    That should work.

    Years later edit

    Meanwhile, a new toy is in town: flexbox. The support is fairly good (i.e. if you don't need to support lower than IE 10) and the ease of use is way over floats.

    You can see a very good flexbox guide here. The example you need is right here.

    0 讨论(0)
  • 孤城傲影
    2020-12-02 14:35

    The element with the centered content needs to be specified after both floated elements. After that, simply set the middle element to text-align: center. The text in the centered element will squeeze in between the floats.

    See here: http://jsfiddle.net/calvintennant/wjjeR/

    0 讨论(0)
  • 太阳男子
    2020-12-02 14:39

    Usually you can use flexbox instead of floats:

    https://jsfiddle.net/h0zaf4Lp/

    HTML:

    <div class="container">
    <div>left</div>
    <div class="center">center</div>
    <div>right</div>
</div>

    CSS:

    .container {
   display: flex;
}

.center {
    flex-grow: 1;
}
    0 讨论(0)
  • 逝去的感伤
    2020-12-02 14:46

    A simple solution without having to change the order of the divs (sometimes we can not do this) could be an absolute positioning for the center div as follows:

    .container {
  position: relative;
}
.container div {
  width: 200px;
  background: red;
}
.left {
  float: left;
}
.right {
  float: right;
}
.center {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}
    <div class="container">
  <div class="left">left</div>
  <div class="center">center</div>
  <div class="right">right</div>
</div>
    https://jsfiddle.net/Helioz/nj548y0g/

    0 讨论(0)
  • 逝去的感伤
    2020-12-02 14:48

    In some cases, you have a limitation and cannot change the page markup by moving the middle div after the right-floated div. In that case, follow these instructions:

    1. For container: position: relative
    2. For middle div: position: absolute; left: [containerWidth - middle-width / 2]

    I hope you got the idea.

    0 讨论(0)
 看不清?
提交回复
热议问题