CODEWITHSUNDEEP
cssalignmentshapesgeometrytext-alignment
skifast
skifast

Reputation: 87

Css Circle and text inline

Hello i need to have a css circle and on right a text, inline.

I use this code

<div class="circlearancione">Disponibile</div>

.circlearancione{
background-color: red;
    border-color: white;
    border-radius: 50%;
    border-width: 5px;
    height: 25px;
    width: 25px;
}

But using this my text not have any space between circle and text. I try to use margin and padding but nothing change.

Also try to use

 <div class="circlearancione"></div><p>Disponibile</p>

.circlearancione, p { display: inline; }

But with this not display the circle.

What's wrong?

Thanks

Upvotes: 1

Views: 7653

Answers (4)

kiaaanabal
kiaaanabal

Reputation: 384

My suggestion would be to place a span within your div that will act like the circle

<div class="circlearancione"><span></span> Disponibile</div>

Here is a fiddle: https://jsfiddle.net/v5LLp7uf/

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122037

You can use :before pseudo-element for circle and Flexbox for vertical alignment.

.circlearancione {
  display: flex;
  align-items: center;
}
div:before {
  content: '';
  background-color: red;
  border-color: white;
  border-radius: 50%;
  border-width: 5px;
  height: 25px;
  width: 25px;
}
<div class="circlearancione">Disponibile</div>

You can also put your text in span and add it some margin-left.

.circlearancione {
  background-color: red;
  border-color: white;
  border-radius: 50%;
  border-width: 5px;
  height: 25px;
  width: 25px;
  line-height: 25px;
}
span {
  margin-left: 30px;
}
<div class="circlearancione"><span>Disponibile</span></div>

Upvotes: 4

Leon Freire
Leon Freire

Reputation: 818

I can imagine something like this if you would like to avoid using flex.

.circlearancione {
  display: inline-block;
  vertical-align: middle;
  margin: 0 5px 0 0;
  background-color: red;
  border-color: white;
  border-radius: 50%;
  border-width: 5px;
  height: 25px;
  width: 25px;
}
<div id="container">
  <p>
    <span class="circlearancione"></span>Disponibile
  </p>
</div>

Upvotes: 0

Nikhil Nanjappa
Nikhil Nanjappa

Reputation: 6632

You could use simple flex to achieve it. It promotes fluid, responsive, scalable and readable structure.

HTML

<div class="container">
  <div class="circlearancione"></div>
  <p>Disponibile1</p>
</div>
<div class="container">
  <div class="circlearancione"></div>
  <p>Disponibile2</p>
</div>
<div class="container">
  <div class="circlearancione"></div>
  <p>Disponibile3</p>
</div>

CSS

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

p { margin:0; }


.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.circlearancione{
  background-color: red;
  border-color: white;
  border-radius: 50%;
  border-width: 5px;
  height: 25px;
  width: 25px;
}

p { margin:0; }
<div class="container">
  <div class="circlearancione"></div>
  <p>Disponibile1</p>
</div>
<div class="container">
  <div class="circlearancione"></div>
  <p>Disponibile2</p>
</div>
<div class="container">
  <div class="circlearancione"></div>
  <p>Disponibile3</p>
</div>

Upvotes: 0

Related Questions