What is the best way to line up three divs as circular shapes in a single row?

Struggling with alignment while trying to create a block legend, seeking advice for correction:

.footertext {
  display: flex;                  /* setting up flex container */
  flex-direction: row;            /* default value; can be omitted */
  flex-wrap: nowrap;              /* default value; can be omitted */
  justify-content: space-between;
  width: 260px;
  margin-top: 30px;
  background: yellow;
}

.circlemarker {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  margin-right: 78px;
  box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.10),
              -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
}

.circlemarker p {
  padding-left: 20px;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 14px;
}

#accactive {
  background: #1698D1;
}
#accdisabled {
  background: #979797;
}
#accprivileged {
  background: #FF9563;
}
<div class="footertext">
  <div>
    <div class="circlemarker" id="accactive" ><p>Active</p></div>
  </div>
  <div>
    <div class="circlemarker" id="accdisabled"><p>Disabled</p></div>
  </div>
  <div>
    <div class="circlemarker" id="accprivileged"><p>Privileged</p></div>
  </div>
</div>

It almost looks okay after adding

margin-right: 78px;

However, using such hardcoded values may not always be ideal as the size changes. How can I adjust the CSS so it looks consistent regardless of the margin? Additionally, it seems that it is not vertically centered. P.S. The yellow background is just for visualizing the parent boundaries.

htmlcssflexbox

Answer №1

.footertext {
  width: 260px;
  margin-top: 30px;
  background: yellow;
  padding: 1rem;
}

.wrapper{
    display: flex;                  /* establish flex container */
  flex-direction: row;            /* default value; can be omitted */
  justify-content: space-between;
}

.circlemarker-wrapper{
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.circlemarker {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  margin-right: 0.5rem;
  box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.10),
              -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
}

.circlemarker p {
  padding-left: 20px;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 14px;
}

#accactive {
  background: #1698D1;
}
#accdisabled {
  background: #979797;
}
#accprivileged {
  background: #FF9563;
}
<div class="footertext">
  <div class="wrapper">
    <div class="circlemarker-wrapper">
      <div class="circlemarker" id="accactive" ></div>
      Active
    </div>
 
   <div  class="circlemarker-wrapper">
        <div class="circlemarker" id="accdisabled"></div>
        Disabled
   </div>
   <div class="circlemarker-wrapper">
    <div class="circlemarker" id="accprivileged"></div>
    Privileged
   </div>
  </div>
</div>

Give this a shot.

Answer №2

An issue arises when the "p" element is positioned outside the box model of the "div class="circlemarker"". I suggest resolving this by removing the "p" tag and moving the circle to div:before.

.footertext {
  display: flex;                  /* establish flex container */
  flex-direction: row;            /* default value; can be omitted */
  flex-wrap: nowrap;              /* default value; can be omitted */
  justify-content: space-between;
  width: 260px;
  margin-top: 30px;
  background: yellow;
  padding: 1rem;
}

.circlemarker:before {
  content: "";
  position: absolute;
  left: 0;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.10),
              -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
}

.circlemarker {
  position:relative;
  padding-left: 20px;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 14px;
}

#accactive:before {
  background: #1698D1;
}
#accdisabled:before {
  background: #979797;
}
#accprivileged:before {
  background: #FF9563;
}
<div class="footertext">
  <div>
    <div class="circlemarker" id="accactive" >Active</div>
  </div>
  <div>
    <div class="circlemarker" id="accdisabled">Disabled</div>
  </div>
  <div>
    <div class="circlemarker" id="accprivileged">Privileged</div>
  </div>
</div>

Answer №3

  1. Ensure the text outside the circlemarker is moved to correctly size the flex items.
  2. Transform the footertext flex items into flexboxes for vertical centering.

.footertext {
  display: flex;                  /* create a flex container */
  flex-direction: row;            /* default setting; can be left out */
  flex-wrap: nowrap;              /* default setting; can be omitted */
  justify-content: space-between;
  width: 260px;
  margin-top: 30px;
  background: yellow;
}

.footertext > div {
  display: flex;
  align-items: center;
}


.circlemarker {
  height: 15px;
  width: 15px;
  display: inline-block;
  border-radius: 50%;
  box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.10),
              -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
}

span {
  font-size: 12px;
  line-height: 14px;
}

#accactive {
  background: #1698D1;
}
#accdisabled {
  background: #979797;
}
#accprivileged {
  background: #FF9563;
}
<div class="footertext">
  <div>
    <div class="circlemarker" id="accactive"></div><span>Active</span>
  </div>
  <div>
    <div class="circlemarker" id="accdisabled"></div><span>Disabled</span>
  </div>
  <div>
    <div class="circlemarker" id="accprivileged"></div><span>Privileged</span>
  </div>
</div>

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

What is the best way to center-align the label of a TextField in React Material-UI horizontally?

I'm trying to center-align the label in this TextField: import React from "react"; import { withStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; export ...

cssreactjsmaterial-ui

A web-based interaction platform with HTML 5 integration built on Django

In the process of constructing a front end layout, I am utilizing HTML 5 within the django framework. The front end will display various posts, similar to those found on a discussion forum, and my goal is to enable users to leave comments on these posts. ...

djangohtml

Implementing template loading on page load with state in AngularJS

When my application loads, I want the nested view list-patents.htm to be displayed. The main navigation is on my index.htm, featuring two nav items: transactions and patents. If you click on patents, two sub-menu items will appear: list patents and add p ...

javascripthtmlangularjsangular-ui-router

What method can I use to distinguish between these two buttons while working with Selenium?

Having issues with identifying buttons while using Selenium on Python. I need to click "Add Alert" for the button related to TOP1, but struggling due to lack of data tags. Any assistance is appreciated as I am new to this! <tbody> <tr> ...

pythonhtmlselenium

One consolidated CSS file for all @media queries versus individual CSS files for each @media query

Imagine if all media types are consolidated into a single CSS file, like the example below: Here is the content of style.css @media only screen and (min-width: 480px) { /* Style adjustments for viewports 480px and over go here */ } @media only screen ...

performanceoptimizationcss

When incorporating an array into a span tag, only the final string is being shown by the loop

I need assistance with changing the content of a span tag every 1.5 seconds, but currently it only displays the final word in the 'list' array. Below is my JavaScript code: var list = [ "websites", "user interfaces" ]; setInterval(fun ...

javascripthtmlarraysloopsfor-loop

Decompressing CSS in PhpStorm

I'm currently using PhpStorm version 2016.3.2. Occasionally, I come across <style> tags in my HTML files containing minified CSS code. Is there a way to create a shortcut for unminifying the code within these tags? For instance, the following ...

htmlcssphpstormminifyunminify

Tips for successfully passing PHP variables to a JavaScript function

Having trouble passing the selected values of two comboboxes to another PHP file using AJAX. How can I pass both values in one function? <script> function showUser(str,str2) { if (str == "" || str2 =="") { document.getElementById("tx ...

javascriptphphtmlajax

Difficulty keeping the dropdown menu open in bootstrap 4

I am facing an issue with my dropdown menus. I want them to only toggle open or close when the dropdown menu itself is clicked, not when any of the list items or other parts of the page are clicked. Below is the code snippet that is causing the problem: ...

javascripthtmltwitter-bootstrapbootstrap-4twitter-bootstrap-4

What is preventing simple HTML DOM Parser from traversing certain websites?

Query: After adding error_reporting(-1); I encountered the following error: Notice: Trying to access a property of a non-object in /data/22/2/145/126/2960289/user/3282682/htdocs/add.php on line 106 Notice: Undefined offset: 0 in /data/22/2/145/126/296028 ...

phphtmlparsingdom

Filtering elements upon loading

I have successfully implemented data filtering on my website using data-filter. While everything is working great, I am interested in displaying items with specific attributes upon loading. For instance, I want to load only green objects by default inste ...

jqueryhtmlcss

When making an Ajax call, the response returns the existing HTML page instead of the intended

Recently, I attempted to implement an AJAX call using jQuery in the following manner (the file name is BR_states.txt and it matches correctly): <script> function changeSelectedShippingCountry(select){ var countryCode = select.options[select.select ...

javascriptjqueryhtmlajax

IE 11 is giving me trouble with max-width functionality

As a new designer, I recently created my own WordPress theme that functions perfectly on FireFox, Chrome, and Opera. However, I encountered an issue with InternetExplorer (I'm using Windows 7 with IE 11). It appears that InternetExplorer 11 does not ...

htmlcssinternet-explorer

Troubleshooting OWLCarousel CSS3 issue with -webkit styling

After extracting the code for owl carousel from its website along with the included CSS and JS files, I encountered errors related to prefixes such as -webkit, -mos, and -ms. Upon further investigation, I found suggestions to add the following JS code: $( ...

javascripthtmljquerycss

Is it difficult to present certain fields in a side-by-side format?

When choosing fields for child age, two select fields are displayed but they are not inline side by side. I want them to be displayed inline, like the first two select fields. Here is my code: function addFields() { var number = document.getElementById( ...

javascriptphphtmlcssbootstrap-4

Refresh the image following the ajax request

I seem to be encountering some difficulties. Whenever I click to rotate an image using ajax and save the new image, it does so without refreshing the page. However, the issue arises when the old image is not updated with the new one that is refreshed. Fu ...

javascriptjqueryhtmlajax

What is the best way to create a more compact Select component in React?

Working on React's Select component has been quite the challenge for me. I'm in the process of creating a simple dropdown button, also known as a ComboBox, similar to what can be seen on GitHub Insights: https://i.stack.imgur.com/J9Bcd.png Belo ...

javascriptcssreactjsmaterial-uiinline-styles

Guide to creating animated sections using only CSS as you scroll the webpage

I am searching for a method to add animation effects (using @keyframes, transform...) to certain elements as the user scrolls down the page. For instance: When the offset is 0: the div will have a height of 100px. When the offset is between 0 and 100: th ...

htmlcss

Using Python Flask to write data to a CSV file and then retrieve and read the information

While I have managed to read from the CSV file successfully, I am still uncertain about how to write to it. The goal is to allow users to input their comments, store them in the CSV file, and then display the comments later on. This snippet shows the cod ...

pythonhtmlformscsvflask

Create a dialog box with rounded triangle corners

In the process of developing an application, we are incorporating a text display feature within a div that resembles a chat box direction, but with a curved style as depicted in the screenshot linked below. Desired design exemplified in purple Target des ...

htmlcssresponsive-design