How to Make Space Between Middle Line and Text

How to make space between middle line and text?

For this particular example you ca do this:

.wrapper{  display: inline-block;}.outter-h2 {  float: left;  width: 100px;  text-align: center;  border-bottom: 1px solid #cccccc;  margin-top: 4%;}.outter-span {  float: left;  background: #fff;  padding: 0 10px;  border: 1px solid #cccccc;  border-radius: 50%;  color: #bec3c7;  margin: 0 10px;}

<div class="wrapper"><div class="outter-h2"></div><span class="outter-span">?</span><div class="outter-h2"></div></div>

CSS technique for a horizontal line with words in the middle

This is roughly how I'd do it: the line is created by setting a border-bottom on the containing h2 then giving the h2 a smaller line-height. The text is then put in a nested span with a non-transparent background.

h2 {   width: 100%;    text-align: center;    border-bottom: 1px solid #000;    line-height: 0.1em;   margin: 10px 0 20px; } 
h2 span {     background:#fff;     padding:0 10px; }

<h2><span>THIS IS A TEST</span></h2><p>this is some content other</p>

How to make a space between left column and text in the middle

Using margin would not help much, but You could put some container (another div) in those divs having padding-right and padding-left.

How to get even lines and spacing betweeen text using css

The easiest solution is to use display:contents with your text and the line will also be part of the flexbox container

.progress-bar {
  display: flex;
  justify-content: space-around;
  align-items:center;
  margin-top: 50px;
}

.progress-bar p {
  display: contents;
  text-align: center;
  line-height: 0.1em;
}

.progress-bar p:not(:last-of-type)::after {
  content: "";
  width: 8%;
  height: 2px;
  background: black;
}

<div class="progress-bar">
  <p>text one</p>
  <p> text two</p>
  <p>text three</p>
  <p>text four</p>
</div>

Add centered text to the middle of a horizontal rule

Flexbox is the solution:

.separator {
  display: flex;
  align-items: center;
  text-align: center;
}

.separator::before,
.separator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #000;
}

.separator:not(:empty)::before {
  margin-right: .25em;
}

.separator:not(:empty)::after {
  margin-left: .25em;
}

<div class="separator">Next section</div>

Add space between HTML elements only using CSS

A good way to do it is this:

span + span {
    margin-left: 10px;
}

Every span preceded by a span (so, every span except the first) will have margin-left: 10px.

Here's a more detailed answer to a similar question: Separators between elements without hacks

css - Why is there a big white space between text lines?

p,h2{    line-height:0px    }

<h2>Hello world</h2><p>ajsdkjahsdhalkshdklashdkjhasjdklajshdkjashdl</p><p>ajsdkjahsdhalkshdklashdkjhasjdklajshdkjashdl</p>

Control middle space between 2 flex items in a row

If you want your elements to have a particular proportion in relation to each other or to the whole (i.e: 50%), flexbox is not even the best solution (although it can be crow-bared to fulfill the requirement).

A simple display: inline-block; width: 50%; box-sizing: border-box on the children will do.

---

Flexbox was designed to allow fluid distribution of positive or negative space.

As in, after the browser determines how much space the children need and how much they have available, by comparing the two it deals with two cases:

• positive space: when parent > sum of children, redistribute the space to each child, proportionally with their respective flex-grow values (until the space is filled) or, if no children have positive flex-grow values, distribute the space in between the children
• negative space: if parent < sum of children, shrink each child proportionally with their flex-shrink values.

You have a case of positive space, where the children do not have flex-grow, so the space can be redistributed in between them. You have three options:

• justify-content: space-between
• justify-content: space-around
• justify-content: space-evenly

Notice how the spaces are equally distributed in each case. That's why it's called flexbox, that's what it was designed for and, if you want, that's its superpower.

When you set width: 50% you kind of take all of that away:

.row {  display: flex;  width: 100%;}
.row>* {  border: 1px solid #ccc;  text-align: center;}
.one {  justify-content: space-between;}
.two {  justify-content: space-around;}
.three {  justify-content: space-evenly;}
.grow>* {  flex-grow: 1;  margin: 1rem;}

<code>justify-content: space-between</code><div class="row one">  <div>    <h2>Centered</h2>    <p>Text</p>  </div>  <div>    <h2>Centered</h2>    <p>Text</p>  </div>  <div>    <h2>Centered</h2>    <p>Text</p>  </div></div><code>justify-content: space-between  (unequal)</code><div class="row one">  <div>    <h2>A bigger element here</h2>    <p>Text</p>  </div>  <div>    <h2>Centered</h2>    <p>Text</p>  </div>  <div>    <h2>Centered</h2>    <p>Text</p>  </div></div>
<hr><code>justify-content: space-around;</code><div class="row two">  <div>    <h2>Centered</h2>    <p>Text</p>  </div>  <div>    <h2>Centered</h2>    <p>Text</p>  </div>  <div>    <h2>Centered</h2>    <p>Text</p>  </div></div><code>justify-content: space-around; (unequal)</code><div class="row two">  <div>    <h2>A bigger element here</h2>    <p>Text</p>  </div>  <div>    <h2>Centered</h2>    <p>Text</p>  </div>  <div>    <h2>Centered</h2>    <p>Text</p>  </div></div><hr><code>justify-content: space-evenly;</code><div class="row three">  <div>    <h2>Centered</h2>    <p>Text</p>  </div>  <div>    <h2>Centered</h2>    <p>Text</p>  </div>  <div>    <h2>Centered</h2>    <p>Text</p>  </div></div><code>justify-content: space-evenly; (unequal)</code><div class="row three">  <div>    <h2>A bigger element here</h2>    <p>Text</p>  </div>  <div>    <h2>Centered</h2>    <p>Text</p>  </div>  <div>    <h2>Centered</h2>    <p>Text</p>  </div></div><hr><code>> flex-grow: 1;</code><div class="row grow">  <div>    <h2>Centered</h2>    <p>Text</p>  </div>  <div>    <h2>Centered</h2>    <p>Text</p>  </div>  <div>    <h2>Centered</h2>    <p>Text</p>  </div></div><hr><code>> flex-grow: 1; (unequal elements)</code><div class="row grow">  <div>    <h2>A bigger element here</h2>    <p>Text</p>  </div>  <div>    <h2>Centered</h2>    <p>Text</p>  </div>  <div>    <h2>Centered</h2>    <p>Text</p>  </div></div>

---

Related Topics