[Special Summer Sale] 40% OFF All Magento 2 Themes

VIEW OFFER

Cart

How can I horizontally center an element?

Home TopicHow can I horizontally center an element?
  • This topic is empty.
Viewing 15 posts - 16 through 30 (of 31 total)
1 2 3
  • Author
    Posts
  • August 14, 2018 at 9:49 am #9059
    David Hoang
    Keymaster
    #outer {
  width: 160px;
  padding: 5px;
  border-style: solid;
  border-width: thin;
  display: block;
}

#inner {
  margin: auto;
  background-color: lightblue;
  border-style: solid;
  border-width: thin;
  width: 80px;
  padding: 10px;
  text-align: center;
}
    <div id="outer">
  <div id="inner">Foo foo</div>
</div>
    December 30, 2018 at 4:02 am #9060
    David Hoang
    Keymaster

    My updated and preferred solution is this:

    #inner {
  width: 100%;
  max-width: 65px; /*width of the content*/
  margin: 0 auto;/*this will make put the div in the center*/
  text-align: center;/*this will center the text inside the div*/
}
    <div id="outer">
  <div id="inner">Foo foo</div>
</div>

    With flexbox:

    #outer {
  display: flex;
  justify-content: center;
  align-items: center;
}
    <div id="outer">
  <div id="inner">Foo foo</div>
</div>
    May 23, 2019 at 7:50 am #9035
    David Hoang
    Keymaster

    For a horizontally centered <div>:

    #outer {
    width: 100%;
    text-align: center;
}
#inner {
    display: inline-block;
}
    <div id="outer">
  <div id="inner">Foo foo</div>
</div>
    January 20, 2021 at 1:29 am #9038
    David Hoang
    Keymaster

    Flexbox Center Horizontally and Vertically Center Align an Element

    .wrapper {border: 1px solid #678596; max-width: 350px; margin: 30px auto;} 
      
.parentClass { display: flex; justify-content: center; align-items: center; height: 300px;}
      
.parentClass div {margin: 5px; background: #678596; width: 50px; line-height: 50px; text-align: center; font-size: 30px; color: #fff;}
    <h1>Flexbox Center Horizontally and Vertically Center Align an Element</h1>
<h2>justify-content: center; align-items: center;</h2>

<div class="wrapper">

<div class="parentClass">
  <div>c</div>
</div>

</div>
    March 30, 2021 at 2:45 am #9039
    David Hoang
    Keymaster

    Try the below example but the container should have a width, for example 100%.

    button {
   margin: 0 auto;
   width: fit-content;
   display: block;
}
    May 15, 2021 at 8:32 am #9040
    David Hoang
    Keymaster
    #outer {
   display: grid;
   place-items: center;
}
    <div id="outer">
  <div id="inner">Foo foo</div>
</div>
    October 30, 2021 at 4:07 am #9041
    David Hoang
    Keymaster

    I’d simply suggest using justify-content: center; when the container is displayed as flex.
    and text-align: center; when it is about a text element.

    check the code below and modify as per the requirements.

    #content_block {
  border: 1px solid black;
  padding: 10px;
  width: 50%;
  text-align: center;
}

#container {
  border: 1px solid red;
  width:100%;
  padding: 20px;
  display: flex;
  justify-content: center;
}
    <div id="container">
  <div id="content_block">Foo foo check</div>
</div>
    January 20, 2022 at 6:43 am #9042
    David Hoang
    Keymaster
    #outer {
   display: flex;
   width: 100%;
   height: 200px;
   justify-content: center;
   align-items: center;
}
    February 16, 2022 at 3:28 am #9043
    David Hoang
    Keymaster
    * {
   margin: 0;
   padding: 0;
}

#outer {
   background: red;
   width: 100%;
   height: 100vh;
   display: flex;
   /*center For  vertically*/
   justify-content: center;
   flex-direction: column;
   /*center for horizontally*/
   align-items: center;
}

#inner {
   width: 80%;
   height: 40px;
   background: grey;
   margin-top: 5px;
}
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>horizontally center an element</title>
    </head>

    <body>
        <div id="outer">
            <div id="inner">1</div>
            <div id="inner" style="background: green;">2</div>
            <div id="inner" style="background: yellow;">3</div>
        </div>
    </body>
</html>
    May 14, 2022 at 2:21 am #9044
    David Hoang
    Keymaster
    .res-banner {
    width: 309px;
    margin: auto;
    height: 309px;
}
    <div class="container">
    <div class="res-banner">
        <img class="imgmelk" src="~/File/opt_img.jpg" />
    </div>
</div>
    August 18, 2022 at 1:58 am #9045
    David Hoang
    Keymaster
    #outer {
    display: flex;
    align-items: center;
}
    <div id="outer">
  <div id="inner">Foo foo</div>
</div>
    August 23, 2022 at 12:55 pm #9031
    David Hoang
    Keymaster

    You can horizontally align any element using:

    <div align=center>
    (code goes here)
</div>

    Or:

    <!-- css here -->
    .center-me {
        margin: 0 auto;
    }

<!-- html here -->
    <div class="center-me">
        (code goes here)
    </div>
    October 30, 2022 at 1:51 am #9036
    David Hoang
    Keymaster

    I think this will be a solution:

    #outer {
    position: absolute;
    left: 50%;
}

#inner {
    position: relative;
    left: -50%;
}

    Both elements must be the same width to function separately.

    November 25, 2022 at 8:56 am #9033
    David Hoang
    Keymaster

    You can use <center> tag for convenience.

    <div id="outer">
    <center>
        <div id="inner">Foo foo</div>
    </center>
</div>

    Note: <center> is deprecated and shouldn’t be used anymore.

    April 10, 2023 at 8:26 am #9046
    David Hoang
    Keymaster

    An element can be centered horizontally easing using the CSS Flexbox property.

    #outer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
    <div id="outer">
  <div id="inner">Foo foo</div>
</div>
  • Author
    Posts
Viewing 15 posts - 16 through 30 (of 31 total)
1 2 3
  • You must be logged in to reply to this topic.