How to center a div horizontally within another div using CSS

Question

How to center a div horizontally within another div using CSS

I'm attempting to center a block element horizontally on my webpage.

Here's an illustration of what I'm aiming for:

I can't use fixed div dimensions as the design needs to be responsive.

Below is the HTML code:

 <div class = "container">
    <div class="sub">
        <h1> 01</h1>
        <div class = "icon"><img src="img/settings.png" alt="">
            <h2> Power Inside</h2>
            <p>Cum sociis natoque penatibus et magnis dis parturient montesmus. Pro vel nibh et elit mollis commodo et nec augueique</p>
            <a class="iconlink" href="/">Read more</a>
        </div>
    </div>
 <div>

CSS

.container {
    width: 1160px;
    overflow: hidden;
    display: inline-flex;
    margin: 0 auto;
}

.sub{
    padding: 30px;
    display: inline-block;
    vertical-align: top; 
}
....
....

html css alignment

Answer 1

Answer №1

Here is the solution you are looking for.

.container {
    Use flex instead of inline-flex
}

If you still need to use inline-flex, then apply text-align:center; to the parent element.

Answer 2

Here is the solution you are looking for.

.container {
    Use flex instead of inline-flex
}

If you still need to use inline-flex, then apply text-align:center; to the parent element.

Answer 3

Answer №2

Having a responsive layout doesn't necessarily mean using only flexible sizing. You can actually incorporate "hard" sizing by utilizing media queries in your CSS file. These queries allow you to specify certain adjustments for elements when the page reaches a specific size. Below is an example code snippet:

@media (max-width: 400px) {
  div {
    width: 20px;
  }
}

If you find this concept a bit confusing initially, don't worry! Once you grasp it and witness its functionality, everything will become clearer and more straightforward.

Answer 4

Having a responsive layout doesn't necessarily mean using only flexible sizing. You can actually incorporate "hard" sizing by utilizing media queries in your CSS file. These queries allow you to specify certain adjustments for elements when the page reaches a specific size. Below is an example code snippet:

@media (max-width: 400px) {
  div {
    width: 20px;
  }
}

If you find this concept a bit confusing initially, don't worry! Once you grasp it and witness its functionality, everything will become clearer and more straightforward.

Answer 5

Answer №3

To create a wrapper div that spans 100% width, simply add a div with width:100%. Inside this div, create another div with your desired total width and margin: 0 auto. Within this second div, you can then create three additional divs with a width of 33% each and set them to float:left.

<div class="container">
        <div class="subcont">
           <div><p>This is div1</p></div>
           <div><p>This is div2</p></div>
           <div><p>This is div3</p></div>
        </div>
    </div>

div:not(.container):not(.subcont){
    float: left;
    width: 33%;
    margin: 0 auto;
}

.container{
    text-align: center;
    width: 100%;
    background: green;
    overflow: hidden;
}

.subcont{
    margin: 0 auto;
    width: 50%;
    background: red;
    overflow: hidden;
}

For an example implementation, check out: http://jsfiddle.net/cbmkg2e5/

Answer 6

To create a wrapper div that spans 100% width, simply add a div with width:100%. Inside this div, create another div with your desired total width and margin: 0 auto. Within this second div, you can then create three additional divs with a width of 33% each and set them to float:left.

<div class="container">
        <div class="subcont">
           <div><p>This is div1</p></div>
           <div><p>This is div2</p></div>
           <div><p>This is div3</p></div>
        </div>
    </div>

div:not(.container):not(.subcont){
    float: left;
    width: 33%;
    margin: 0 auto;
}

.container{
    text-align: center;
    width: 100%;
    background: green;
    overflow: hidden;
}

.subcont{
    margin: 0 auto;
    width: 50%;
    background: red;
    overflow: hidden;
}

For an example implementation, check out: http://jsfiddle.net/cbmkg2e5/

How to center a div horizontally within another div using CSS

Answer №1

Answer №2

Answer №3

Similar questions

What is the process for calculating the total sum of input values utilizing JavaScript?

Remove the float from the final list item in order to resolve display issues in Internet Explorer

Interpolation problem with AngularJS translation service

Iterate through the contents of a directory and display the HTML content corresponding to each file

How to deactivate the <a> tag with Ant Design UI Library

Adjusting the sound levels of an HTML audio element using JavaScript

What causes the CSS width property to vary when using the display:inline property?

Sass Alert: The mixin called roboto-family is missing from the stylesheet. Trace: Problem detected in src/pages/forms/forms.scss at

"Exploring the world of Reactstrap: A

Is there a way to dynamically modify the text of an HTML button element with jQuery?

Problem with the mobile site width due to viewport misalignment

Problems with select tag change events

Utilizing Bootstrap 3: Achieving Varied Font Sizes within a Row with Bottom Alignment

Unable to Upload Image to MySQL Database

What is the best way to add a character within a YouTube JSON link?

Can you explain the concept of "entity-body" in relation to Digest Authentication?

Ways to configure dynamic and responsive divs using CSS exclusively (no javascript needed)!

Choose a Date from the Calendar and Modify the Link Text

The importance of z-index in web design and its compatibility with Chrome

GAE does not have access to background images