What is preventing the two spans from being centered within the div?

I'm having trouble centering the two spans within the div. How can I fix this issue? The code below is not working, but when I move the div outside of the two spans and change the display property to inline-block, it works. Why is this happening?

body{
  margin: 0;
  padding: 0;
}
.topbar{
  border: 1px solid;
  max-width: 800px;
  height: 20px;
}
.inner1{
  float: left;
  border: 1px solid red;
}
.inner2{
 float: left;
  border: 1px solid red;
}
.clearfix::after{
  content: "";
  clear: both;
  display: block;
}
.topbar{
  text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Very strange how inline-block can align but inline cannot" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="topbar ">
  
    <span class="inner1">register</span>
    <span class="inner2">login</span>
  
</div>
  
</body>
</html>

htmlcss

Answer №1

Your inner1 and inner2 classes have the style float: left, which is causing the spans to move to the left. Simply removing this style will fix the issue. Here is the updated code:

body{
  margin: 0;
  padding: 0;
}
.topbar{
  border: 1px solid;
  max-width: 800px;
  height: 20px;
}
.inner1{
  border: 1px solid red;
}
.inner2{
  border: 1px solid red;
}
.clearfix::after{
  content: "";
  clear: both;
  display: block;
}
.topbar{
  text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="很奇怪inline-block能对齐，inline不能对齐" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="topbar ">
  
    <span class="inner1">register</span>
    <span class="inner2">login</span>
  
</div>
  
</body>
</html>

Answer №2

The reason the content cannot be centered is due to the use of float: left; on both spans. To center the content, simply remove the float: left; property.

If you place the spans within a div element with the display: inline-block property, the content will appear centered. This is because the div will be centered without the float: left property, allowing the spans to float left within the center of the div. I hope this clarifies things for you :)

Answer №3

One alternative method is utilizing the flexbox model for alignment. It is simpler and results in less code.

body {
  margin: 0;
  padding: 0;
}

.topbar {
  border: 1px solid;
  max-width: 800px;
  height: 20px;
  display: flex;
  justify-content: center;
}

.topbar span {
  border: 1px solid green;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="很奇怪inline-block能对齐，inline不能对齐" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="topbar ">
  
    <span class="inner1">register</span>
    <span class="inner2">login</span>
  
</div>
  
</body>
</html>

PS: To further simplify the code, instead of using inner1 and inner2, I consolidated them as .topbar span in the CSS since both share the same property.

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

Conceal portion in HTML until revealed

I am attempting to create 3 sections within a single HTML file using the <section id="id"> tag, and I want to be able to open each section by clicking a link in the header with <a href="#id">1</a>, and then close it when another section i ...

javascriptphphtmlcss

Choosing a unique font style in CSS (OTF) - How to differentiate between bold, italic, etc. when using multiple OTF files?

I'm a little confused on how to implement @font-face in my current project. The client handed over multiple font files including FontName-Black.otf, FontName-BlackItalic.otf, FontName-Bold.otf, FontName-BoldItalic.otf, and more. My usual approach wou ...

cssfont-face

The issue with collapsible elements not functioning properly in an Angular application involving CSS and JS

My implementation of collapsible in a plain HTML page looks like this: <!DOCTYPE html> <html> <head> <title></title> <style> button.accordion { background-color: #777; color: white; cursor: pointer; p ...

javascripthtmlcssangular

Jumbling a word by shuffling its letters into a random order

The objective of the program is to take the word you input into a box, split it into an array of letters, and then shuffle them. Following that, it should capitalize the first letter and lowercase the rest before displaying the result in the same box. I a ...

javascripthtmlarraysstring

Is it possible to simultaneously toggle buttons and submit a form?

I am currently working on a functionality that involves toggling the display of two buttons and submitting a form. Code toggleButtons() { var btn1 = document.getElementById("start"); var btn2 = document.getElementById("pause"); if (btn1.style. ...

javascripthtml

"Entering a text message will prompt the appearance of the on-screen keyboard in capital

Our website is optimized for use on Android tablets. I have added the following CSS to the input's class: text-transform: uppercase; While this successfully displays typed letters in uppercase, it does not change the appearance of the on-screen keyb ...

asp.net.nethtmlcsshtml-input

Styling elements using css and flexbox

Looking for some help with wrapping 4 items in CSS using flex. I want to display 3 items in a row, followed by a single item. .movies { display: flex; flex-direction: row; justify-content: space-between; align-items:flex-start; flex: 1 ...

htmlcssflexbox

Struggling to update a scope variable when utilizing Firebase's Facebook authentication with AngularJS

Hey there... I'm currently exploring AngularJS and attempting to implement Facebook's connect feature using Firebird. Almost everything is running smoothly - the connection to my Facebook account is successful, and the information is retrieved w ...

javascripthtmlangularjsframeworksfirebase

"Trouble encountered while trying to display Angular in an HTML document

In my Angular project, there is a feature where a list of orders is displayed in one view. Each order is represented by its title only. When the user clicks on the title, they should be redirected to a new view showing the complete content of that particul ...

javascripthtmlangularjs

What is the best way to show the page before loading custom fonts?

My website is time-sensitive and I need it to prioritize displaying the page before loading any custom fonts. Essentially, I want the page to show up initially as if the fonts are not loaded. This way, the custom fonts (if already cached by the browser) w ...

phphtmlcssweb

Update cursor when hovering over a button

What can I do to make the cursor change to a hand when hovering over my submit button? Currently, the cursor remains as the standard arrow and does not switch when placed on the button. The code for my button is: <button>Submit</button> ...

htmlbutton

Submitting data and files simultaneously to Ajax using Laravel

As I work on enhancing my registration page with Bootstrap Modal, I need to allow users to upload their image along with other information. HTML <form method="POST"> <center> <img name="user_image" id="proPic" src="ima ...

phpjqueryhtmlajaxlaravel

Items seem to vanish into thin air and become immovable when attempting to relocate them

I am attempting to create a unique grid layout with 3x3 dimensions, where each grid item represents a fragment of a single image. These items should have the capability to be dragged and dropped inside another 3x3 grid, in any desired sequence. I have hit ...

javascripthtmlcssdrag-and-dropgrid

With the addition of a key element in the opening statement

Take a look at this code snippet: <div class="content"> This is some title<br/> Some text<br/> And maybe more text. </div> I am trying to wrap the first sentence with a <span> tag before the <br/> element, like s ...

jquerycss

CSS button pressed

I came across a helpful discussion on the topic of CSS for pressed buttons, which provided some answers that I found useful. The link to the discussion can be found here: Pressed <button> CSS. Currently, I have a button within a link and I would lik ...

javascriptjqueryhtmlcss

attempting to eliminate on-screen buttons by hovering over the video

Is there a way to make my video play on loop like a GIF without the controls ever showing? I want it to have a seamless playback experience. Any ideas would be appreciated. P.s. Don't worry about any StackOverflow errors when running the snippet. Than ...

javascripthtmlcss

Setting up ng-show in AngularJS

Looking for a solution to use ng-repeat and ng-show to organize data into two columns effectively <div class="col-md-4"> <div class="row" infinite-scroll="eventSearchService.getMoreEvents()"> <div ng-repeat="event in eventSearchService ...

javascripthtmlangularjsangularjs-ng-repeatangularjs-filter

What is the best way to show HTML code from an HTML file in a Vue template?

I need help showcasing the HTML code from an external file in a Vue component template. <template> <div class="content"> <pre> <code> {{fetchCode('./code/code.html')}} & ...

javascripthtmlvue.jsfilereader

Deleting an object with javascript in django: A step-by-step guide

Is there a way to use JavaScript to create a confirmation window before deleting an item? <div class="card-footer"> <a href="{% url 'course_delete' student.slug %}"><button>Delete</button>&l ...

javascripthtmldjangoajax

What could be causing this div to shift positions when the browser window is resized?

When resizing the browser, I'm having trouble keeping the div boxes in place. The bottom-right lower div (vd-grid-sub-box) keeps shifting away when I slightly decrease the browser size. Additionally, vd-grid-right-col overlaps with the banner if the s ...

htmlcss