Styling circles and text side by side with CSS

Hey there, I'm trying to create a CSS circle with text aligned to the right alongside it. Here's the code I've been using:

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

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

However, I am having trouble adding space between the circle and the text. I've tried adjusting the margin and padding but it doesn't seem to work. I also attempted this:

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

.circlearancione, p { display: inline; }

Unfortunately, this method doesn't display the circle at all. Can anyone tell me what I might be doing wrong? Appreciate any help!

cssalignmentshapesgeometrytext-alignment

Answer №1

To create a circular element, you can utilize the CSS :before pseudo-element for the circle shape and implement 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">Available</div>

If you prefer to place your text within a span element, you can apply some left margin using the margin-left property.

.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>Available</span></div>

Answer №2

To achieve this layout, you can implement a simple flexbox design. Flexbox helps create a structure that is fluid, responsive, scalable, and readable.

HTML

<div class="container">
  <div class="circle-orange"></div>
  <p>Available1</p>
</div>
<div class="container">
  <div class="circle-orange"></div>
  <p>Available2</p>
</div>
<div class="container">
  <div class="circle-orange"></div>
  <p>Available3</p>
</div>

CSS

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

p { margin:0; }


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

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

p { margin:0; }
<div class="container">
  <div class="circle-orange"></div>
  <p>Available1</p>
</div>
<div class="container">
  <div class="circle-orange"></div>
  <p>Available2</p>
</div>
<div class="container">
  <div class="circle-orange"></div>
  <p>Available3</p>
</div>

Answer №3

If you prefer not to use flex, here is an alternative solution that I can suggest.

.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>

Answer №4

To enhance the appearance of your div, I recommend incorporating a span element to represent the circle shape.

<div class="circleorange"><span></span> Available</div>

Feel free to view this demonstration on JSFiddle: https://jsfiddle.net/8mPDJ2Qk/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to achieve a blurred background effect on the body using CSS

I've been experimenting with setting a background color using linear gradient, but now I want to add a blur effect to it. I've tried various codes but haven't had any success so far. Here is the CSS code I have been working on: body{ ...

css

I am having trouble getting my CSS styles to apply to nested components within Bootstrap React components

Currently I am learning react and in the process of creating a website using react-bootstrap. While working on my navbar, I encountered an issue where I was unable to change the font and font-color of the navbar items. The CSS that I applied only affected ...

cssreactjsbootstrap-5

The surprising height discrepancy in the li element while using the jQuery sortable plugin

After implementing this plugin, everything was running smoothly except for one minor bug that I encountered - the li element was displaying an unexpected height. To replicate this issue, follow these steps: 1. Open the sortable demo in Internet Explorer an ...

jquerycssjquery-uijquery-ui-sortablecolumn-count

What is causing the resistance in changing the color of my current navigation items?

I've encountered a small challenge with my header section. Despite multiple attempts, I'm struggling to change the color of the 'current' menu item. It seems that overriding Bootstrap's default color is proving to be more difficult ...

htmlcsstwitter-bootstrap

See-through navigation bar custom-made for materializecss

I've been trying to make my navbar transparent using materializecss, but all my attempts so far have resulted in it turning white. Any suggestions would be greatly appreciated. Thank you! Here is the code I tried: <nav> <div class="nav-w ...

htmlcssmaterialize

Conceal the pagination element within the Bootstrap aside on smaller screens

I am experiencing an issue with my web page layout. I have a DIV and an Aside element, inside the DIV there is a list with dynamic pagination. Everything seems to be functioning correctly, however on small devices, the Aside section is covering up the pa ...

javascripthtmlcsstwitter-bootstrappagination

There is an overflow issue where content on the left side is being hidden when the overflow is set to auto

I am attempting to display a content box consistently on both desktop and mobile by utilizing a fixed width and overflow property. :root { --box: rgb(20, 33, 150); --box1: rgb(55, 75, 255); --background: rgb(147, 158, 255); } body { -we ...

htmlcssflexboxbootstrap-4overflow

"Troubleshooting: Why is my Bootstrap modal window only printing a

I've encountered an issue with printing the content of a Bootstrap modal window. Previously, the code I had was working fine but now it seems to be malfunctioning. Content is dynamically added to the form using appendChild() in a separate function. Ho ...

javascriptjqueryhtmlcssbootstrap-4

issues with responsive mobile navigation

Greetings! I've been diligently working on a website project for a client, but I have a nagging feeling that I may have overlooked something important. If you'd like to take a look at the small design mockup preview I'm providing for the cl ...

javascripthtmlcssbootstrap-4responsive-design

What is the method for setting a cell's row-span to 2 using bootstrap?

Is there a way to make the red cell in a Bootstrap grid have a row-span=2 and fill the second row as well? .cell {height: 100px; border: 1px solid; border-collapse:collapse;} .red {background: red;} .yel {background: lightyellow;} <link href="https:/ ...

csstwitter-bootstrap

Target the select element with a specific style applied, but restrict it to only be selected when nested within a div that shares the same style

Not quite sure about the effectiveness of the title, but here's what I'm attempting to accomplish. <div class="mystyle"> <select name="somename" id="somename"> <option value="Value1"> <option value="Value2" ...

css

What is the best way to ensure that this jQuery window has a minimum size?

Recently, I came across a helpful jQuery demo that demonstrated how to create a popup window on my website. For those interested, the demo link can be accessed here: http://jqueryui.com/dialog/#modal-message The design of the window I am aiming to replica ...

javascriptjqueryhtmlcssjquery-ui

Determination of an arc trajectory using JavaScript

I have been trying to figure out how to replicate this effect. The Red arrowhead remains stationary while the background features a curved path. Currently, I am adjusting the background position to give the illusion of the arrowhead moving along the curved ...

javascriptjqueryhtmlcss

You can interact with our dropdown menu using the tab key, even when it is

We are looking to make our dropdown tabbable when expanded and non-tabbable when collapsed. We attempted using tabindex="-1" on the content inside the expandable div, but this resulted in it being non-tabbable even when expanded. Any suggestions on how t ...

javascripthtmlcssfrontend

Access an HTML element and using JavaScript to make changes to it

As a new web developer, I am eager to create a grid of file upload zones on my site. I have decided to use DropZone.js for this project. I have customized DropZone and added multiple drop zones in the HTML. The grid layout consists of four rows with four ...

javascriptjqueryhtmlcssnode.js

What are some strategies for effectively utilizing GitHub's primer and octicons?

Utilizing GitHub's primer and octicons. Upon installation with npm, I incorporated the css classes provided by GitHub through the inclusion of the build.css file in my HTML document. How can I direct the project to access all the SVG icons offered by ...

htmlcssgithubsass

Is there a way to eliminate this scroll bar from view?

https://i.sstatic.net/Iwz8e.png Can someone assist me in hiding this automatic visibility? Your help is greatly appreciated! Source: https://github.com/noname181/htmlcss ...

htmlcss

Display or Conceal Sub-Header according to Scrolling Position

Question: My goal is to create a specific animation on my website. When loading the page on mobile, I want to display the div with ID "sub-header", but once the user scrolls more than 50px down, I want to hide it. Additionally, if the user scrolls up by 60 ...

javascriptjqueryhtmlcss

Ensuring elements are correctly positioned

I am struggling to make the images in the following code align horizontally across the top and also need to align the h1's in the same way. I have tried using the vertical-align property, but it seems to behave oddly to me. HTML: <div class=&apos ...

cssformattingalignmentvertical-alignment

Guide on using JavaScript to implement the universal CSS selector

One technique I frequently employ is using the CSS universal selector to reset the dimensions in my HTML document: * { border: 0; margin: 0; padding: 0; } I wonder if a similar approach can be achieved with JavaScript as well? When it come ...

javascriptcsscss-selectors