Center horizontal line across div

Related searches

I am trying to centre a horizontal line across a div which can change dynamically depending on the content inside it. I have created a div with content inside it.

The horizontal line should be centred across either side of the box but should not be visible inside the div.

html

<div class ="box">
<hr/>
<div class="container">
          <h3>Click on either of the two buttons!</h3>
          <button class="button ">Button 1</button>
          <button class="button ">Button 2</button>
    </div>
</div>

css

hr {
    border: 2px solid;
}
.container {
  border: 2px solid;
  width: 45%;
  margin: auto;
  padding: 10px;
  text-align: center;
}

.button {
  background: transparent;
  border: 2px solid;
  padding: 10px 40px;
  font-size: 15px;
  text-align: center;
  margin: 20px 10px 10px 0;
  font-weight: bold;
  display: inline-block;
}

Here's the link to codepen

Introduce a little bit of Flexbox CSS. Hope this helps with what you need.

This is putting three elements into one <div> and then aligning them left to right on the same row.

("Run Code Snippet" and click full page size, you shall see the design as requested in the image in the question).

.box {
  display: flex;
}

hr {
  align-self: center;
  background: black;
  width: 40%; 
  height: 1px
}
.container {
  border: 2px solid;
  width: 45%;
  padding: 10px;
  text-align: center;
}

.button {
  background: transparent;
  border: 2px solid;
  padding: 10px 40px;
  font-size: 15px;
  text-align: center;
  margin: 20px 10px 10px 0;
  font-weight: bold;
  display: inline-block;
}
<div class ="box">
    <hr>
        <div class="container">
            <div>
                <h3>Click on either of the two buttons!</h3>
                <button class="button ">Button 1</button>
                <button class="button ">Button 2</button>
            </div>
        </div>
    <hr>
</div>

Draw horizontal lines on a webpage | by MasaKudamatsu, Change the length of lines. Now we want to make each line shorter, with the middle line the shortest. So we add modifier classes: <div class=� How to Horizontally Align Center a div Using CSS 1. Center Text alignment with text-align Well it’s the basics. We are simply assigning the value of text-align property 2. Center Text-alignment with respect to parent Okay add the following html <div class="text"> <h2>HTML and CSS 3. Center

You could possibly use transform to do what you are after.

Here I have added a fixed height to your parent container and then vertically centred both the hr and the box using

  position:relative;
  top:50%;
  transform:translateY(-50%);

All this does is position the element vertically center using the parent elements height.

hr {
  position:relative;
  top:50%;
  transform:translateY(-50%);
  border: 2px solid;  
}
.box{
  height:300px;
}
.container {
   position:relative;
  top:50%;
  transform:translateY(-55%);
  border: 2px solid;
  width: 45%;
  margin: auto;
  padding: 10px;
  text-align: center;
  background-color:white;
}

.button {
  background: transparent;
  border: 2px solid;
  padding: 10px 40px;
  font-size: 15px;
  text-align: center;
  margin: 20px 10px 10px 0;
  font-weight: bold;
  display: inline-block;
}
<div class="box">
<hr/>
<div class="container">
          <h3>Click on either of the two buttons!</h3>
          <button class="button ">Button 1</button>
          <button class="button ">Button 2</button>
    </div>
</div>

How To Make Horizontal Lines <HR> In HTML & CSS , Horizontal lines can be created in HTML or CSS. Browsers draw a line across the entire width of the container, which can be the entire width by setting the width property and then centering it using the following CSS rule. How to Center Align Div Element Horizontally with CSS To perform this task, you have to add a CSS classthe div element you want centrally aligned. Now, add the CSS margin property and other CSS for the look and feelof the div element.

.example {
    display: flex;
    justify-content: center;
    width: 100%;
}

.example::before,
.example::after {
  display: flex;
  align-items: center;
  content: '';
  align-self: center;
  box-sizing: border-box;
  width: 100%;
  height: 3px;
  background: #000;
}

 .example::before {
   margin-left: -100%;
}

.example::after {
  margin-right: -100%;
}

.example div {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
  padding: 20px;
}
<div class="example">
  <div>
    <h3>Click on either of the two buttons!</h3>
    <button>Button 1</button>
    <button>Button 2</button>  
  </div>
</div>

How to make horizontal line with words in the middle using CSS , We use cookies to ensure you have the best browsing experience on our website . By using our site, you acknowledge that you have read and� If you need to use CSS to center text within an element like a div, header or paragraph you can use the CSS text-align property. Setting the text-align property to center is the most common way to horizontally align text using CSS.

Centered Heading Overlaying a Horizontal Line with CSS , Method 1: A Pseudo-Element The pseudo-element has a top border, and it's positioned halfway down from the top. I also wrap the heading text inside a <span> to overlap the center portion of the horizontal line. The pseudo-element is z-indexed to ensure it's below the span. Centering things is one of the most difficult aspects of CSS. The methods themselves usually aren't difficult to understand. Instead, it's more due to the fact that there are so many ways to center things. The method you use can vary depending on the HTML element you're trying to center, or whether you're centering it horizontally or vertically. In this tutorial, we'll go over how to center

Text on left, horizontal line on right - HTML & CSS, div { margin: 20px; overflow :hidden; color: gray; text-align: left; line-height: 1.6em ; } div:before { display: block; float: right; margin-top: .8em; /* half the line-height� Center Align Elements. To horizontally center a block element (like <div>), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container. The element will then take up the specified width, and the remaining space will be split equally between the two margins: This div element is centered.

I've been looking around for some solutions for this simple decoration and I've found quite a few ones, some weird, some even with JS to calculate the height of the font and bla,bla,bla, then I've read the one on this post and read a comment from thirtydot speaking about fieldset and legend and I thought that was it.

Comments
  • Glad to help :-)