Problem in center align contents inside a div

HTML & CSS
1

Hi

this is my jsfiddle

I am trying to align content inside a .centerAllContent element in a center.

When I try to align content inside .centerAllContent in center then it shifted left

what is wrong with my css?

2

Where is the CSS for .centerAllContent?

What is the ā€œcenterā€ you are referring to?

3

I am referring content inside centerAllContent is already in center

Now I am trying to center content inside elements of centerAllContent class in center

see class child1 you will get what I mean

4

Like Ron, I canā€™t see either a class of centerAllContent in the HTML, nor any CSS that relates to it. What are we missing?

Have we got the right JSFiddle to look at?

1 Like
5

Please look at the fiddle that you posted.

There is no .centerAllContent.
There is no center.
There is no .child1.

6

my mistake see my edit

7

Try validating the page using the W3.org ā€œJigsawā€ CSS Validator:

https://jigsaw.w3.org/css-validator/validator

There is an error.

1 Like
8

Your knowledge of basic HTML behaviors is inadequate. Your assumptions about HTML boxes are immature. You cannot confidently control something if you do not understand how it is supposed to behave by defaultā€¦ before CSS is added.

Form elements, including <input> and <label>, are historically difficult to style when they are properly used inside of a <form> element. Experienced coders do not look forward to styling forms. If you want to study forms, buy a good book about styling forms and read it. SitePoint has one on their shelf. Iā€™m sure you can find others.

I believe that you were told in a previous post that there is no such property as {float:center}. Well, there is STILL no such property as {float:center}. You could easily check a resource for valid float values. It is indeed your responsibility to verify the validity of the code that you use before you wave a flag for help.

Iā€™m sure youā€™ve been told to validate your HTML and CSS. The best coders do it; so should you.

Your presumption that .centerAllContent {text-align:center} should center all content is mistaken.
It will center inline and inline-block elements, but not block elements.
.child1 has been assigned {display:block; width:250px} so it is not affected by {text-align:center} on the parent container. To center .child1, add {margin:0 auto} to .child1, OR change .child1 {display:block} to .child1 {display:inline-block}. The difference will be obvious when you apply those styles. You can also simply delete the width and see how the element displays without the width. With {display:block} assigned, it will extend to the full width of the parent container and the text will be centered because you have assigned {text-align:center} to .child1.

Play with this, and let me know if it means anything to you.

4 Likes
9

@vngx - you might find this site useful for checking various properties: http://tympanus.net/codrops/css_reference/#section_css-property

10

display:inline-block

worked for me

11

I notice you are still using the float:center; which no doubt worked in the browser of your choice because the error was most likely ignored.

Other browsers may opt for an alternative solution which could create major display problems.

CSS is cascading so the following script could be used, reduce bloat, simplify modifications and reduce the CSS file size:


.centerAllContent{
    text-align:center;
    background-color:blue;}

.child1,
.child2,
.child3 {
    display:inline-block; 
    width:250px; 
    background-color:red;}

.child2 {
    background-color:green;}
.child3 {
    background-color:yellow;}
1 Like
12

Do you understand why {display:inline-block} works whereas the default {display:block;} with a width assigned {width:250px} did not work?

1 Like
13

Iā€™m a bit curious on this myself. I recreated the code on Codepen using Johnā€™s CSS, mainly because Iā€™m more familiar with its interface.

1 Like
14

How about this

15

Johnā€™s code is making a different pointā€¦ emphasizing efficient code.

The original code is in the first fiddle https://jsfiddle.net/rowb42an/1/

vngx did not answer the question that I asked in post #12.

1 Like
16

Agreed. I notice that the latest JSFiddle, has picked up that more efficient code.

I also acknowledge your point about post #12. If learning is to be achieved, then there has to be an understanding of why things work as they do.

1 Like
17

from this post
http://www.w3schools.com/cssref/pr_class_display.asp

block Displays an element as a block element.

and display:inline-block

inline-block Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box

so What I understand that display:inline-block format them self as inline-level box and css property.In this
case if I use display:inline-block result is this

and if I use only display:block

things are not still clear to me why there is margin between elements when we use display:block;

18

Hereā€™s a good opportunity to take a close look at what the browser dev tools are telling you about the CSS that is being applied to your markup. It should very quickly become clear where the margins are coming from. Start by right-clicking on one of the affected element, and select ā€˜Inspect Elementā€™.

1 Like
19

You are confusing things by using bad mark up again and the break elements at the end of the line are causing the gaps.

When you use inline-block then the break element and the label element sit together on the same line and you get one line break at the end.

When you use a display:block the block element creates a new line and then the break creates another new line resulting in two lines.

It has nothing to do with margin.

3 Likes
20

now I have removed br tag

but element inside a div are not in center align