Bollate

HTML

[ANSWERED] html – Centering contents of multiple colums

By

Nov 20, 2022 ,

Solution 1 :

To center items you can use display: flex on the container div and also use

align-items: center; // vertical
justify-content: center; // horizontal

To achieve the image you attached you don’t need so many containers, this can be done simply like in this example:

.container {
  width: 100%;
  height: 300px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
}

@media only screen and (max-width: 500px) {
  .inner-details {
    width: 50%;
    float: left;
    position: relative;
  }
}

.inner-details {
  background: pink;
  display: flex;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  margin: 10px;
}
<div class="container">
  <div class="inner-details">
    <h1>Middle 1</h1>
  </div>
  <div class="inner-details">
    <h1>Middle 2</h1>
  </div>
</div>

Solution 2 :

I hope this is your desire output. Please check the code snippets.

* {
  box-sizing: border-box;
}
.outer {
  width: 50%;
  height: 100px;
  float: left;
  position: relative;
  background: pink;
  margin: 10px 0; 
}

@media only screen and (max-width: 500px) {
  .outer {
    width: 100%;
  }
}

.inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.inner-position {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="outer">
  <div class="inner">
    <div class="inner-position">
      <p>I should be centered</p>
    </div>
  </div>
</div>

<div class="outer">
  <div class="inner">
    <div class="inner-position">
      <p>I should be centered</p>
    </div>
  </div>
</div>

Solution 3 :

Using the example from the first snippet and wrapping that twice I’ve managed to get the desired effect, there’s still the issue with having to use text-align to align horizontally but this is the closest I can get without using flex or box-sizing: border-box;. If there’s a more appropriate way to do this an example would be appreciated.

.wrap {
	width: 100%;
    display: table;
}

.col {
	width: 50%;
    float: left;
}

@media only screen and (max-width: 500px) {
.col {
	width: 100%;
    float: left;
}
}

.outer {a
    width: 100%;
    height: 100px;
    margin-top: 10px;
    margin-bottom: 10px;
    position: relative;
    background: pink;
    text-align: center;
}

.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}
<div class="wrap">
   <div class="col">
      <div class="outer">
         <div class="inner">
            <h1>I'm Centered</h1>
         </div>
      </div>
   </div>
   <div class="col">
      <div class="outer">
         <div class="inner">
            <h1>I'm Centered Too</h1>
         </div>
      </div>
   </div>
</div>

Problem :

I’m creating a grid type layout, the contents of which will be centered, like here.

.outer {
    width: 100%;
    height: 100px;
    margin-top: 10px;
    margin-bottom: 10px;
    position: relative;
    background: pink;
    text-align: center;
}

.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}
<div class="outer">
<div class="inner">
<h1>I'm Centered</h1>
</div>
</div>

I’ve used text-align: center; but there should be a better way to center the contents vertically too. My issue arises trying to do the same where two of these are next to each other with centered content, like this;

.outer {
    width: 50%;
    float: left;
    position: relative;
    background: pink;
}

@media only screen and (max-width: 500px) {
.outer {
    width: 100%;
    float: left;
    position: relative;
    background: pink;
}
}

.inner {
    position: relative;
}

.inner-position {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}
    <div class="outer">
        <div class="inner">
            <div class="inner-position">
              <p>I should be centered</p>
            </div>
        </div>
    </div>
    
    <div class="outer">
        <div class="inner">
            <div class="inner-position">
              <p>I should be centered</p>
            </div>
        </div>
    </div>

It’s looking even worse in a snippet for some reason but something like this would be desired;
Example
I can get the column layout or I can center content. I need to be able to do both.

EDIT

.container {
    width: 100%;
    height: 500px;
    background: pink;
    margin-top: 10px;
    margin-bottom: 10px;
}

.col {
    width: 50%;
    float: left;
        position: relative;
}

@media only screen and (max-width: 500px) {
.col {
    width: 100%;
    float: left;
    position: relative;
}
}

.inner {
    position: relative;
}

.inner-details {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}
<div class="container">
    
    
    <div class="col">
        <div class="inner">
            <div class="inner-details">
            <h1>Middle 1</h1>
            </div>
        </div>
    </div>
    
        <div class="col">
        <div class="inner">
            <div class="inner-details">
            <h1>Middle 2<h1>
            </div>
        </div>
    </div>
</div>

Comments

Comment posted by Cornel Raiu

did you have a look at

Comment posted by learningtoanimate

Yes @CornelRaiu, I want to use media queries and float them vs flex or a grid due to the layout being used.

Comment posted by Cornel Raiu

you can make

Comment posted by learningtoanimate

That ends up adding margin

Comment posted by css-tricks.com/dont-overthink-flexbox-grids

css-tricks.com/dont-overthink-flexbox-grids

Comment posted by Itay Gal

Please look at the example I added

Comment posted by learningtoanimate

Close but the background needs to be on the main wrapper as it won’t be a solid colour in the end. I’ve found an approach with more wrappers

Comment posted by Itay Gal

OK, you can use the background where you want, but this is the core idea of the layout and it matches your image

Comment posted by learningtoanimate

I’m going to test a few variants now

Comment posted by learningtoanimate

That’s close (and fine for stacking them), there’s no support for keeping it working horizontally

Comment posted by yinsweet

@learningtoanimate what do you mean no support for keeping it working horizontally? Sorry, I don’t understand.

Comment posted by learningtoanimate

If you see my answer and then resize the viewport you’ll notice it adapts to the screen

Comment posted by yinsweet

@learningtoanimate that’s because I’m using % for the height. Once I changed the height to fix value such as 100px, I think I get the same results as yours. Please check the code snippets again. Thx.

By

Related Post

HTML

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

Nov 20, 2022
HTML

[ANSWERED] html – How to include a clickable image behind a link

Nov 20, 2022
HTML

[ANSWERED] html – Move list item to the left in header/navigation menu

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022