All geek questions in one place

Center one element with several siblings

I have a div with some number of spans in it, which may or may not be the same width. I know that I can use text-align: centerto ensure that all content within the div is centered. However, I want to select a specific interval and designate this as the true center, not the center that is the middle of the sequence of intervals.

One of the ideas I had to simulate was the following: I would have the desired middle element with two containers on the left and right; the left would be well-grounded and vice versa. These containers will contain other content in the div. If I could get these two containers to fill the remaining space in equal amounts, this will affect the centering of the middle element while keeping the left and right contents aligned with the center. In principle, this will require that the width of the two containers be set equal to half the remaining space in the div. (I don't want to resize the middle div.) Can this be done only with CSS?

Example: with 4 spans, how do I designate span 2 as a true center?

div {
  width: 500px;
  padding: 4px;
  border: 1px dotted black;
}
span {
  display: inline-block;
  width: 100px;
  text-align: center;
  margin: 4px;
  box-sizing: border-box;
  border: 1px dotted black;
}
#b {
  /* ??? */
}
<div>
  <span id="a">1</span>
  <span id="b">2</span>
  <span id="c">3</span>
  <span id="d">4</span>
</div>
Run codeHide result
+4
3

, flexbox. display:flex; div flex-grow:1; 2nd span. , div .

1- 3- , 2- . flex-basis , .

div.container{
  width: 500px;
  padding: 4px;
  border: 1px dotted black;
}
div.row{
  display:flex;
  align-items:center;
  justify-content:center;
}
span {
  display: inline-block;
  width: 70px;
  text-align: center;
  margin: 4px;
  box-sizing: border-box;
  border: 1px dotted black;
  transform:translate(50%,0);
}
#b {
}
<html>

<head></head>

<body>
  <div class='container'>
    <div class="row">
      <span id="a">1</span>
      <span id="b">2</span>
      <span id="c">3</span>
      <span id="d">4</span>
    </div>
  </div>
</body>

</html>
Hide result
+1

3- CSS. 1- 3- , 50% , 0, , , , .

white-space: nowrap; , , , .

.container {
  display: table;
  border-collapse: collapse;
  width: 100%;
}
.item {
  display: table-cell;
  vertical-align: top;
  padding: 4px;
  border: 1px solid grey;
}
.item-a {
  width: 50%;
  text-align: right;
}
.item-b {
  text-align: center;
  white-space: nowrap; /* remove as needed */
}
.item-c {
  width: 50%;
}
.item span {
  display: inline-block;
  border: 1px solid red;
}
.item-b span {
  padding: 0 50px; /* for demo only */
}
<div class="container">
  <span class="item item-a">
    <span>1</span>
  </span>
  <span class="item item-b">
    <span>2</span>
  </span>
  <span class="item item-c">
    <span>3</span>
    <span>4</span>
  </span>
</div>
Hide result

jsFiddle

+1

You can use flexbox. Based on this answer ,

.outer-wrapper {
  display: flex;
  padding: 4px;
  border: 1px dotted black;
}
.item {
  margin: 4px;
  text-align: center;
  border: 1px dotted black;
}
.left.inner-wrapper, .right.inner-wrapper {
  flex: 1;
  display: flex;
  align-items: flex-start;
  min-width: -webkit-min-content; /* Workaround to Chrome bug */
}
.left.inner-wrapper {
  justify-content: flex-end;
}
.animate {
  animation: anim 5s infinite alternate;
}
@keyframes anim {
  from { min-width: 0 }
  to { min-width: 50vw; }
}
<div class="outer-wrapper">
  <div class="left inner-wrapper">
    <div class="item animate">1. Left</div>
  </div>
  <div class="center inner-wrapper">
    <div class="item">2. Center</div>
  </div>
  <div class="right inner-wrapper">
    <div class="item">3. Right</div>
    <div class="item">4. Right</div>
  </div>
</div>
<!-- Analogous to above --> <div class="outer-wrapper"><div class="left inner-wrapper"><div class="item">1. Left</div></div><div class="center inner-wrapper"><div class="item animate">2. Center</div></div><div class="right inner-wrapper"><div class="item">3. Right</div><div class="item">4. Right</div></div></div><div class="outer-wrapper"><div class="left inner-wrapper"><div class="item">1. Left</div></div><div class="center inner-wrapper"><div class="item">2. Center</div></div><div class="right inner-wrapper"><div class="item animate">3. Right</div><div class="item">4. Right</div></div></div><div class="outer-wrapper"><div class="left inner-wrapper"><div class="item">1. Left</div></div><div class="center inner-wrapper"><div class="item">2. Center</div></div><div class="right inner-wrapper"><div class="item">3. Right</div><div class="item animate">4. Right</div></div></div>
Run codeHide result

This will try to center the desired element, but it will be pressed if one side is not suitable to prevent overlapping.

+1
source

Source: https://habr.com/ru/post/1665414/

More articles:


All Articles