Главная » Языки программирования

Css elements not centering

Содержание
  1. Why is my div element not centering?
  2. 3 Answers 3
  3. Related
  4. Hot Network Questions
  5. Subscribe to RSS
  6. Cannot get CSS Elements centered
  7. aligning elements center in div, not centering

Why is my div element not centering?

You’re using mark-up to represent visual effect, this is what CSS is for. To a blind user, using a screen reader, a | when reading out the navigation will mean nothing.

Does it make me a jerk to not consider my screen-reading brethren? Lol. Didn’t even cross my mind. Thanks for the tip. 🙂

3 Answers 3

To center the footer contents horizontally, just add the following CSS:

If you’re looking to center the entire element, just give it a width and then use margin: 0 auto :

The width of ul#footer is undefined, so it uses the default width of «100%». I tried using width:261px, and then it does center.

Right you are. In order to use margin: auto; as a method of centering a block-level element you’d need to specify a width, otherwise it would take up 100% of the width anyway

@Tyler: I think you’re confusing the CSS text-align property with the deprecated align attribute in HTML. There’s nothing wrong with text-align , no matter how you use it.

Accidentally deleted the comment trying to edit it. Yes, that’s what I thinking about. Little did I know it, though. Lol. Thanks. 🙂

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.25.43544

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

Cannot get CSS Elements centered

I cannot get my site to be centered for the life of me with CSS. I have tried all the usual methods suggested around the web including:

    csselement 



)" data-controller="se-share-sheet" data-se-share-sheet-title="Share a link to this question" data-se-share-sheet-subtitle="" data-se-share-sheet-post-type="question" data-se-share-sheet-social="facebook twitter devto" data-se-share-sheet-location="1" data-se-share-sheet-license-url="https%3a%2f%2fcreativecommons.org%2flicenses%2fby-sa%2f2.5%2f" data-se-share-sheet-license-name="CC BY-SA 2.5" data-s-popover-placement="bottom-start">Share
)" title="">Improve this question
asked Aug 28, 2009 at 14:42
 
Add a comment|

6 Answers 6

Reset to default
5

Try with this dead centre

)" data-controller="se-share-sheet" data-se-share-sheet-title="Share a link to this answer" data-se-share-sheet-subtitle="" data-se-share-sheet-post-type="answer" data-se-share-sheet-social="facebook twitter devto" data-se-share-sheet-location="2" data-se-share-sheet-license-url="https%3a%2f%2fcreativecommons.org%2flicenses%2fby-sa%2f2.5%2f" data-se-share-sheet-license-name="CC BY-SA 2.5" data-s-popover-placement="bottom-start">Share
)" title="">Improve this answer
answered Aug 28, 2009 at 14:45
1
    Awesome example. Added it to my CSS techniques cheat list.
    – Paul Turner
    Aug 28, 2009 at 14:49
Add a comment|
0

The primary issue is the absolute positioning of your #topHeader element. Because you have it absolutely positioned with top: 0px; left: 0px;, that's exactly where it's going to be positioned - at the top left of the page.

Start off by removing the absolute positioning from the #topHeader element.

)" data-controller="se-share-sheet" data-se-share-sheet-title="Share a link to this answer" data-se-share-sheet-subtitle="" data-se-share-sheet-post-type="answer" data-se-share-sheet-social="facebook twitter devto" data-se-share-sheet-location="2" data-se-share-sheet-license-url="https%3a%2f%2fcreativecommons.org%2flicenses%2fby-sa%2f2.5%2f" data-se-share-sheet-license-name="CC BY-SA 2.5" data-s-popover-placement="bottom-start">Share
)" title="">Improve this answer
answered Aug 28, 2009 at 14:51
Add a comment|
0

Try adding this to the top of your css file:

// Wipes out any preexisting padding and margin. html, body

Then add a position: relative; directive to the class you want centered. Actually, try adding it to the html, body one so that all your classes use relative position. It might be that you have position: absolute; set which then combines with the left: 0px; to force your header contain to ignore the margin: 0 auto; and stay on the left of the page.

Источник

Elements not centering using margin: auto [duplicate]

Pen http://codepen.io/anon/pen/xVGdxG To prematurely answer the obvious questions. Yes, the page is declared , yes the finalizebuttons div is wrapped in a body tag, and yes it's meant to be 100% of the page.

4 Answers 4

Following is the code that will work without touching much to your original code.

You just adjust your CSS as follows:

#finalizeButtons < display: block; margin-top: 5%; width: 100%; height: 35px; background-color: blue; text-align:center; >#finalizeButtons button

i touch your code and this is the solution: http://codepen.io/anon/pen/xVGdww you are using float to left, then the elements never being centered, and using text-align center to the container expect it help

#finalizeButtons < display: block; margin-top: 5%; width: 90%; height: 35px; background-color: blue; text-align:center; >#finalizeButtons button

See this fiddle

It was not getting centered because you have the float property.

Replace your CSS with the below given one

#finalizeButtons < display: block; margin-top: 5%; width: 100%; height: 35px; background-color: blue; text-align: center; >#finalizeButtons button < display: inline-block; /* float: left; */ /* margin-left: auto; margin-right: auto; */ background-color: red; >

I think you are using float:left to make them aligned one after the other. That can actually be made using just display:inline-block and you already have that.

Now, to make it centered, just add text-align:center to the container.

Depending upon the circumstances, provision of an auto value instructs the browser to render a margin according to the value provided in its own stylesheet. However, when such a margin is applied to an element with a meaningful width, an auto margin instead causes all of the available space to be rendered as whitespace.

So you need to provide a "meaninful width" in order for the margin: auto to actually center the element inside its parent.

Here's a solution for your problem, using margin: auto:

Источник

aligning elements center in div, not centering

enter image description here

I have the following I need to get the team names and points centered, under team jerseys. I have been researching and trying, and tweaking but it just wont get centered. In my latest attempt I tried help in this post How to align an element always center in div without giving width to its parent div? with display:inline block to no success:

.tNames < margin-left:0px auto; margin-right:0px auto; float:left; > 
 
 
 
 
'; echo'BY'; echo''; echo'POINTS'; echo'
';

enter image description here

WITHOUT FLOAT

float:left certainly won't help centering things. Did you try text-align:center ? Or display:inline-block; margin:auto; ?

if you want to center your inner content, you just remove float:left, and also margin-left:0px auto; margin-right:0px auto; is wrong code and no use at all

Also please, post HTML, not PHP, as Guruprasad asked. It's easy to work on HTML, much less on what generates it.

Источник

Читайте также:  Javascript var document form
Оцените статью
© 2024 Программирование