Align everyone vertically in the left, center, or right div

Question

Align everyone vertically in the left, center, or right div

My goal is to create a three-column layout with the following specifications:

div1 (green) with its content left-aligned
div2 (blue) with its content center-aligned
div3 (magenta) with content right-aligned

Within each column, there are multiple block elements (referred to as "sheeps" in my design). I need each element to be vertically aligned at the absolute middle, regardless of their size. As shown by the red-dotted line, all contained elements should have their centers on the same line.

I am starting from scratch and want to achieve this without using fixed dimensions.

Thank you for any assistance provided.

Edit: The code that I currently have can be found here http://jsfiddle.net/gV99f/6/

html css

Answer 1

Answer №1

I'm uncertain, however I believe this may be the solution you are looking for. Tables or display: table, display: table-cell might be necessary.

Take a look at the JsFiddle DEMO here

Answer 2

I'm uncertain, however I believe this may be the solution you are looking for. Tables or display: table, display: table-cell might be necessary.

Take a look at the JsFiddle DEMO here

Answer 3

Answer №2

I came across a solution that may work for you, here is a link to the JSFIDDLE.

Just follow these instructions to align everything properly:

<div class="container">
    <div class="left"><span>div 1</span><br/><img src="http://i49.tinypic.com/bgd4qr.jpg" border="0" alt="Image and video hosting by TinyPic"></a></div>
    <div class="center">div 2</div>
    <div class="right">div 3</div>
</div>

CSS

.container {
    width:600px;
    height:200px;
    border:1px solid;
}
.left {
    width:150px;
    height:200px;
    background:magenta;
    float:left;
}
.left span{
      width:100px;
    float:left;
    text-align:left;
    margin-bottom:20px;
}
.left img{
    width:100px;
    height:100px;
    float:left;

}
.center {
    height:200px;
    width:300px;
    background:blue;
    float:left;
    text-align:center;
}
.right {
    height:200px;
    width:150px;
    background:green;
    float:right;
    text-align:right;
}

Answer 4

I came across a solution that may work for you, here is a link to the JSFIDDLE.

Just follow these instructions to align everything properly:

<div class="container">
    <div class="left"><span>div 1</span><br/><img src="http://i49.tinypic.com/bgd4qr.jpg" border="0" alt="Image and video hosting by TinyPic"></a></div>
    <div class="center">div 2</div>
    <div class="right">div 3</div>
</div>

CSS

.container {
    width:600px;
    height:200px;
    border:1px solid;
}
.left {
    width:150px;
    height:200px;
    background:magenta;
    float:left;
}
.left span{
      width:100px;
    float:left;
    text-align:left;
    margin-bottom:20px;
}
.left img{
    width:100px;
    height:100px;
    float:left;

}
.center {
    height:200px;
    width:300px;
    background:blue;
    float:left;
    text-align:center;
}
.right {
    height:200px;
    width:150px;
    background:green;
    float:right;
    text-align:right;
}

Answer 5

Answer №3

If you want to utilize the latest css3 property called flex, here's how you can do it:

In your HTML :

<div id="wrap">
    <div class="green"></div>
    <div class="blue"></div>
    <div class="cyan"></div>
</div>

For styling in CSS :

#wrap{
    height:50px;
    display:flex;
    align-items:initial;
}
#wrap div{
    flex:1;
}

Take a look at the DEMO here: http://jsfiddle.net/6cae7/1/

If you need to adjust the sizes, you can use the flex-grow property like this:

CSS :

#wrap{
    height:50px;
    display:flex;
    align-items:initial;
}
#wrap div{
    flex-grow:1;
}
#wrap div:nth-child(2){
    flex-grow:3;
}

Check out the DEMO for more details: http://jsfiddle.net/6cae7/3/

Answer 6

If you want to utilize the latest css3 property called flex, here's how you can do it:

In your HTML :

<div id="wrap">
    <div class="green"></div>
    <div class="blue"></div>
    <div class="cyan"></div>
</div>

For styling in CSS :

#wrap{
    height:50px;
    display:flex;
    align-items:initial;
}
#wrap div{
    flex:1;
}

Take a look at the DEMO here: http://jsfiddle.net/6cae7/1/

If you need to adjust the sizes, you can use the flex-grow property like this:

CSS :

#wrap{
    height:50px;
    display:flex;
    align-items:initial;
}
#wrap div{
    flex-grow:1;
}
#wrap div:nth-child(2){
    flex-grow:3;
}

Check out the DEMO for more details: http://jsfiddle.net/6cae7/3/

Answer 7

Answer №4

Check out the Demo

Here is the HTML code:

<div class="wrapper">
    <div class="main">
        <img src="http://www.w3.org/Style/Woolly/woolly-mc.png" width="100" height="100" />
    </div>
    <div class="aside aside-1">
        <img src="http://www.w3.org/Style/Woolly/woolly-mc.png" width="200" height="200" />
    </div>
    <div class="aside aside-2">
        <img src="http://www.w3.org/Style/Woolly/woolly-mc.png" width="150" height="150" />
    </div>
</div>

CSS styles applied to the elements:

.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
}

.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

.main {
  background-color: deepskyblue;
   padding: 100px 0;
}

.aside-1 {
  background: gold;
    text-align: left;
    padding: 50px 0;
}

.aside-2 {
  background: hotpink;
    text-align: right;
    padding: 75px 0;
}

@media all and (min-width: 600px) {
  .aside {
    flex: 1 auto;
  }
}
@media all and (min-width: 800px) {
  .main {
    flex: 2 0px;
  }

  .aside-1 {
    order: 1;
  }

  .main {
    order: 2;
  }

  .aside-2 {
    order: 3;
  }

}

Answer 8

Check out the Demo

Here is the HTML code:

<div class="wrapper">
    <div class="main">
        <img src="http://www.w3.org/Style/Woolly/woolly-mc.png" width="100" height="100" />
    </div>
    <div class="aside aside-1">
        <img src="http://www.w3.org/Style/Woolly/woolly-mc.png" width="200" height="200" />
    </div>
    <div class="aside aside-2">
        <img src="http://www.w3.org/Style/Woolly/woolly-mc.png" width="150" height="150" />
    </div>
</div>

CSS styles applied to the elements:

.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
}

.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

.main {
  background-color: deepskyblue;
   padding: 100px 0;
}

.aside-1 {
  background: gold;
    text-align: left;
    padding: 50px 0;
}

.aside-2 {
  background: hotpink;
    text-align: right;
    padding: 75px 0;
}

@media all and (min-width: 600px) {
  .aside {
    flex: 1 auto;
  }
}
@media all and (min-width: 800px) {
  .main {
    flex: 2 0px;
  }

  .aside-1 {
    order: 1;
  }

  .main {
    order: 2;
  }

  .aside-2 {
    order: 3;
  }

}

Align everyone vertically in the left, center, or right div

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Changing Background Colors of Grid Items in React.js Grid Layout

What is the best way to align all menu items horizontally with the logo?

Bootstrap not functioning properly in selecting gallery items

Get rid of the underlined anchors in your email signature

CSS transforms fluidly transition between absolute and relative positioning

Customize your Bootstrap navbar dropdown to showcase menu items in a horizontal layout

Conceal the calendar icon from the date-type HTML input field specifically on the Firefox

Chrome autocomplete behaves as if the input fields are disabled and cannot be clicked on

Show divs in identical position when clicking

creating an identical copy of a dynamic element's size

How can I position an input element with the class "button" exactly where I need it on the webpage?

Having trouble interacting with buttons while an overlay is open

Changing the visibility of a div with an onClick event in React

Can HTML/CSS be used to specifically target handheld mobile devices?

What is the best way to customize arrow designs in a React Slick Slider?

Having trouble adjusting the outer margin of a PDF generated with html/css in a Flutter iOS app

CSS Only Sidebar Dropdown (without using Bootstrap)

Whenever I press the view button, all the cards open instead of just the one I chose from the index. Can anyone tell me where I am going wrong?

Utilize the object's ID to filter and display data based on specified criteria

Modifying the overflow behavior within a Vuetify dialog