CODEWITHSUNDEEP
htmlcss
lyrically wicked
lyrically wicked

Reputation: 1467

How to get a perfectly centered element (which is surrounded by two independent elements) within an absolutely positioned window-centered container?

I have a markup that should look like this: 

<div id="container">
  <div id="left">
  It is the primary text.
  </div>
  <div id="center">
  Hi!
  </div>
  <div id="right">
  some content 
  </div>      
</div>

The block-level #container element should be absolutely positioned and perfectly centered by the width (not by the height!) of the entire browser window: 

#container {
  display: block;
  width: 95vw;
  background-color: white;
  position: absolute;
  top: 75px;
}

The block-level #center element will have no predefined width or height, its dimensions are unpredictable and it should take as much space as it is needed (but maybe it will have predefined max-height/max-width value). EDIT / Clarification: it should take minimal required width/height, which means that it will take 20 pixels for padding, and some small amount of pixels for "Hi!", and nothing more, so in this case, it will be very small relatively to the container. 

#center {
  display: block;
  background-color: green;
  padding-left: 10px;
  padding-right: 10px;
}

The block-level #left element should take all possible remaining space of the #container, and it will also have text-overflow: ellipsis property: 

#left {
  display: block;
  background-color: red;
  padding-left: 10px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

The #right element should take all possible remaining space of the #container. It has no special properties, but it is just an independent block-level element which can contain anything. 

#right {
  display: block;
  background-color: blue;
}

The result should look like this (in the example below, it is assumed that there is no space to contain the "ext." substring of the #left element, and it is replaced with an ellipsis): 

--------------------------WINDOW EDGE--------------------------
|                              |                              |
|                              |                              |
W                           (75 px)                           W
I                              |                              I
N                              |                              N
D +—————————————————————————————————————————————————————————+ D
O |  It is the primary t...|  Hi!  |some content            | O
W +—————————————————————————————————————————————————————————+ W
  <- - - - - - - - - - - - -(95 vw)- - - - - - - - - - - - ->
E                                                             E
D                                                             D
G                                                             G
E                                                             E

Note that distances between left/right borders of #container and left/right edges of the window should be equal: (100vw - 95vw)/2 = 2.5vw.
How to achieve this? I have read all possible explanations of how to center an element, but cannot find the answer to this specific problem... All I see is to apply predefined dimensions to each element, and then aplly the absolute positioning to each element independently... which is not what I want.

Upvotes: 1

Views: 125

Answers (1)

Quy Truong
Quy Truong

Reputation: 413

You will need to use display:flexbox; to create a "perfect center divs".

#container {
  display: flex;
  width: 95vw;
  background-color: white;
  position: absolute;
  top: 75px;
  justify-content: center;
  flex-flow: row nowrap;
  left: 0; 
  right: 0; 
  margin:auto;
}

#center {
  display: inline-block;
  background-color: green;
  padding-left: 10px;
  padding-right: 10px;
  align-self: center;
  text-align: center;
  animation: center;
  width:auto;
}

#left {
  display: inline-block;
  background-color: red;
  padding-left: 10px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 35%;
  flex-grow: 1;
}

#right {
  display: inline-block;
  background-color: blue;
  flex-grow: 1;
  width: 35%;
}

Note here: you need to defined #left and #right width equally to make it perfectly center.

Demo here: https://jsfiddle.net/usytj8gm/3/

Upvotes: 1

Related Questions