code not in a circle uncentered html css

I'm having trouble with centering text inside a circular shape. Getting the alignment right in the middle of the circle is proving to be difficult for me.

Here's the code I've experimented with so far:

CSS:

.circle {
margin:auto;
border-radius: 50%;
background: rgb(0, 34, 102);
padding: 10px;
width: 110px;
height: 110px;
margin-top:1px;
color: rgb(255, 255, 255);
text-align: center;
}

HTML:

<td colSpan=2> <div class="circle"> Discuss <br> ideas and <br> projects </div> </td>

Check out the outcome here:

https://i.sstatic.net/MA1TH.png

htmlcss

Answer №1

To center your text both horizontally and vertically within a circle, you can utilize the power of CSS positioning. By creating another wrapper div for the text and giving it an absolute position with top and left set to 50%, you can then use the transform property to bring it back into place.

.circle {
  margin: auto;
  border-radius: 50%;
  background: rgb(0, 34, 102);
  padding: 10px;
  width: 110px;
  height: 110px;
  margin-top: 1px;
  color: rgb(255, 255, 255);
  text-align: center;
  position: relative;
}
.circle div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="circle">
  <div>
    Discuss
    <br>ideas and
    <br>projects
  </div>
</div>

Answer №2

The horizontal centering looks good, but don't forget about vertical alignment too. You might want to experiment with position: relative; or incorporate padding along with text-align: center.

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

Linking a button to a (click) event within HTML content fetched from the backend

Hey there, I'm facing a scenario where I have an angular service that sends a HTTP request to the backend for some HTML code. Once the HTML is received, I'm inserting it into the component's HTML using <div [innerHTML]="..."/>. The iss ...

htmlangular

Adjust the input and transition the UI slider

Currently, I am facing an issue with two sliders and inputs. When the number in the top slider is changed, the number and slide in the bottom block do not update accordingly. What steps should I take to address this? $(document).ready(function() { var $ ...

javascriptjqueryhtmljquery-uislider

My code seems to be encountering an issue with the navigation pills not functioning correctly in Bootstrap 4

Why am I unable to successfully add nav-pills to the tag? Despite all my efforts, nothing seems to be working! <ul class="nav nav-pills flex-column"> <li class="nav-item"> <a class="nav-link" href="dashboard.php">Dashboard</ ...

htmlcssbootstrap-4

Tips for restricting the size of inserted content in a contentEditable paragraph

I am in need of a one-line editable paragraph that can contain text without overflowing its size. Currently, I am using CSS to hide the overflow and prevent multiple lines by not displaying the children of the paragraph. However, what I really want is fo ...

javascripthtmlcssoverflowcontenteditable

The functionality of changing the category in the second carousel slider on click using JavaScript appears to

Creating a bootstrap carousel slider that dynamically changes based on the selected category. For example, clicking on the hammer category will display only hammer images, while selecting the compass category will show compass images. Everything worked sm ...

javascripthtmlbootstrap-5

Ways to extract information from a span element

I'm completely new to web scraping and I have encountered an issue where I need to extract data from span elements that do not have any specific classes assigned to them. Here's an example of how they appear: "<span content=\"3 ...

pythoncssweb-scrapingscrapy

Which web browsers are compatible with the input attribute "multiple"?

I am currently incorporating this particular plugin, and its file input does not support multiple file selection. To address this issue, I have added the 'multiple' attribute. However, I am curious if there are any browsers or other platforms (su ...

htmlcssinput

A guide on creating a clickable link using an HTML anchor tag in TTTAttributedLabel

My iOS application retrieves text from a server and displays it in a TTTAttributedLabel after stripping it from HTML. For example, the original HTML might look like this: <p> Hello <a href="http://www.google.com">World!</a> </p> ...

htmliosiphoneuilabeltttattributedlabel

What is the best method to disable default inline styles applied by Three.js on canvas element for webpage background?

After successfully creating a scene with three.js, I encountered an issue trying to use it as the background for my page. Unfortunately, I am unable to get the canvas element to move without cutting off half of my page. I have meticulously removed all CSS ...

javascriptcssthree.js

Learn how to smoothly transfer a URL from JavaScript to HTML and initiate the download process

I created a website that solely relies on HTML5, CSS and JavaScript to function. The core functionality of this website involves utilizing YouTube URLs. I have stored the URL of a specific YouTube video as a variable, now I am looking for a way to transfer ...

javascriptjqueryhtmlyoutube

Clone the "big" div element and insert data within it

Is there a way to dynamically generate div elements while looping through a JSON array? I have various data items that I need to display in separate thumbnails within a row. I am looking for a template structure like the following: for(var i = 0; i < ...

javascripthtmlangularjs

Modify SVG appearance when hovering over a different div

Looking to update the design of my inline SVG logo when the mouse hovers over a different section on the page. Below is a simplified version of my HTML with only the necessary components included: <!-- logo container --> <div class='fu ...

htmlcsssvghoverstyling

Utilizing Angular's Flex-Layout to Create Grid Line Breaks Using fxLayoutWrap

I used to be able to generate a grid with line breaks using Angular flex-layout and fxLayoutWrap. However, it seems that this functionality is no longer working. No matter what value I assign to fxFlex, the div element does not move to the next line. I ca ...

htmlangularangular-flex-layout

Is there a way to boost the scrolling speed of the div element?

I'm currently working on a parallax web design and I need some help. Does anyone know how I can make the red div move faster? I believe it has to do with the formula but I'm not entirely sure. Can someone assist me with this? Check out my code: ...

javascriptphpjqueryhtmlcss

Creating a Javascript function to mirror an HTML object

Essentially, I have HTML code that includes variables html = `<div>${product.id}<img src="${product.src}"/></div>` then I simply update the DOM with: document.querySelector('.container').innerHTML = html; Everything seems to ...

javascripthtml

Make sure the 'card-title' is positioned directly before a div element

How can I align the 'title' to start right above 'first yeah', with the image positioned accordingly? https://i.sstatic.net/fyI2o.png I've attempted various methods (including using classes) but have been unsuccessful so far Her ...

htmlcssbootstrap-4bootstrap-5hbs

Tips on how to turn off the background when the sidenav is opened

Utilizing angular material sidenav for application settings, aiming to achieve a layout similar to Google's. However, I am invoking this sidenav from another component and enclosing the router, so it opens beneath the application header. <mat-siden ...

htmlcssangularangular-material

Creating a div anchor tag within a component in React

Forgive me if this question has already made its rounds on the internet, but I can't seem to get anything to work in my favor. I was under the assumption that all you had to do was append the # + div id at the end of a URL to navigate to a specific d ...

javascripthtmlreactjs

ASP.NET Core 2.1 struggling to implement Shared Layout view across all views

I am facing an issue where the layout view is not consistent across all pages on my website. While the home page and main pages share the same layout, other pages like the login page lack styling and images. Additionally, features like CRUD operations also ...

cssasp.netasp.net-corebootstrap-4

Using loops in directives with AngularJS: A comprehensive guide

Currently, I am in the process of developing a directive for form controls. There is a fixed JSON file that contains all possible questions and their respective options. HTML <text-control-dir data="que.QuestionData" default="{{[_attributename]}}"> ...

javascriptjqueryhtmlangularjs