CODEWITHSUNDEEP
htmlcss
shal
shal

Reputation: 3044

How to keep a specific element in the middle?

I have a row of elements, but one of them, which is in the middle, should be centered. Try to run this simple snippet, the "Must be in the middle" thing is not in the middle, but I would like it to be, despite the sizes of things around it. The "text-align:center" won't help, because it puts the entire list of elements in the middle and it's not aware that I want the "the-middle" thing to be in the middle: 

.the-whole {
  width: 100%;
  text-align: center;
}
.side-thing {
  display: inline-block;
  margin: 8px;
}
.the-center {
  display: inline-block;
  font-weight: bold;
}
<div class="the-whole">
  <div class="side-thing">
    long thing at left
  </div>
  <div class="side-thing">
    a
  </div>
  <div class="side-thing">
    b
  </div>
  <div class="the-center">
    (Must be in the Middle)
  </div>
  <div class="side-thing">
    c
  </div>
  <div class="side-thing">
    d
  </div>

</div>

Upvotes: 2

Views: 224

Answers (5)

Mario Carta Serra
Mario Carta Serra

Reputation: 11

I think it's better to insert a new div. So you will have seven. only One in the center.

#page{
	
	width: 100%;
	text-align: center;
	}

.the-whole {
	width: 39%;
	display: inline-block;
	text-align: center;
}

.side-thing {
  min-width: 10%;
  display: inline-block;
  text-align: center;
  margin: 0px;
  border: 0.1em solid red;
}
.side-thing-left{
  min-width: 40%;
  display: inline-block;
  text-align: center;
  margin: 8px;
  border: 0.1em solid red;
}
.the-center {
  width: 20%;
  display: inline-block;
  font-weight: bold;
  border: 0.1em solid green;
}
<html>
	<head>
	<link rel="stylesheet" href="style.css" type="text/css" />
	</head>
	<body>
		<id id="page">
			<div class="the-whole">
				  <div class="side-thing-left">left</div>
				  <div class="side-thing">a</div>
				  <div class="side-thing">b</div>
			  </div>
				<div class="the-center">(Must be in the Middle)</div>
			  <div class="the-whole">
				   <div class="side-thing-left">left</div>
				  <div class="side-thing">c</div>
				  <div class="side-thing">d</div>
			  
			</div>
		</div>
	</body>
</html>

Upvotes: 1

Oriol
Oriol

Reputation: 288520

You can use flexbox:

.the-whole {
  display: flex;
}
.side {
  flex: 1; /* Distribute remaining width equally among the left and right parts */
}
.the-left {
  text-align: right;
}
.the-right {
  text-align: left;
}
.side-thing {
  display: inline-block;
  margin: 0 8px;
}
.the-center {
  font-weight: bold;
}
<div class="the-whole">
  <div class="the-left side">
    <div class="side-thing">long thing at left</div>
    <div class="side-thing">a</div>
    <div class="side-thing">b</div>
  </div>
  <div class="the-center">(Must be in the Middle)</div>
  <div class="the-right side">
    <div class="side-thing">c</div>
    <div class="side-thing">d</div>
  </div>
</div>

Upvotes: 1

Justinas
Justinas

Reputation: 43507

If you can change HTML, than you can move left and right elements inside centered one:

.the-whole {
  width: 100%;
  text-align: center;
}
.side-thing {
  display: inline-block;
}
.the-center {
  display: inline-block;
  position: relative;
  margin: 8px;
  padding: 0 10px;
}
.the-center span {
  font-weight: bold;
}
.left {
  position: absolute;
  white-space: nowrap;
  right: 100%;
  top: 0;
}
.right {
  position: absolute;
  white-space: nowrap;
  left: 100%;
  top: 0;
}
<div class="the-whole">

  <div class="the-center">
    <div class="left">
      <div class="side-thing">
        long thing at left
      </div>
      <div class="side-thing">
        a
      </div>
      <div class="side-thing">
        b
      </div>
    </div>
    <span>(Must be in the Middle)</span>
    <div class="right">

      <div class="side-thing">
        c
      </div>
      <div class="side-thing">
        d
      </div>
    </div>
  </div>

</div>

Upvotes: 2

Annish
Annish

Reputation: 2185

Is this a solution?

.the-whole {
  width: 100%;
  text-align: center;
}
.side-thing {
  float: left;
  margin: 8px;
}
.the-center {
  float: left;
  font-weight: bold;
  margin: 0 auto;
}

Upvotes: -1

Pugazh
Pugazh

Reputation: 9561

Solution using display:flex.

.the-whole {
  display: flex;
}
.the-whole div {
  display: inline;
}
.the-whole > div {
  flex: 1;
  border: 1px solid green;
}
.the-whole > div.center {
  text-align: center;
}
<div class="the-whole">
  <div class="left">
    <div>
      long thing at left
    </div>
    <div>
      a
    </div>
    <div>
      b
    </div>
  </div>
  <div class="center">
    <div>
      (Must be in the Middle)
    </div>
  </div>
  <div class="right">
    <div>
      c
    </div>
    <div>
      d
    </div>
  </div>

</div>

Upvotes: 1

Related Questions