How to set middle align for <div> without using padding

Hi all,

Please help in middle aligning text in a div without using padding.

Luckychap

Posting Pro in Training

444 posts since Aug 2006

Reputation Points: 83

Solved Threads: 61

3 Years Ago

0

Technically you're not meant to have text in a div, it should be nested within another container, but the following would work...

<div id="example">[INDENT]this is my text[/INDENT]</div>

#example {[INDENT]width: 200px;
text-align: center;[/INDENT]}

However you would need a width value, otherwise the div would naturally assume the width of the text.

R.

blocblue

Posting Pro in Training

475 posts since Jan 2008

Reputation Points: 142

Solved Threads: 79

3 Years Ago

0

But with this its only aligning text in horizontal. I want it to centered aligned in vertical also. Here is what I tried with your code.

<html>
	<head>
        <style>
            #ta {
                text-align: center;
                border: 1px solid #000000;
                width: 200px;
                height: 100px;
            }
        </style>
	</head>
	<body>
		<div name='banner' id='ta'>Hello</div>
	</body>
</html>

Luckychap

Posting Pro in Training

444 posts since Aug 2006

Reputation Points: 83

Solved Threads: 61

3 Years Ago

0

I don't think

#ta {[INDENT]height: 400px; width: 400px;
text-align: center; vertical-align: middle;[/INDENT]}

will work on text.

You could try nested divs, giving them both widths and heights, then giving the internal div, margin: auto;

R.

blocblue

Posting Pro in Training

475 posts since Jan 2008

Reputation Points: 142

Solved Threads: 79

3 Years Ago

0

I just wonder why on earth you can't use padding?

ingeva

Junior Poster

106 posts since Jul 2008

Reputation Points: 16

Solved Threads: 9

3 Years Ago

0

Technically you're not meant to have text in a div, it should be nested within another container, but the following would work... R.

Could you please explain how you are supposed to properly use text in a div.

Thanks,
-Moe

moodymoe15

Newbie Poster

6 posts since Dec 2008

Reputation Points: 10

Solved Threads: 2

3 Years Ago

0

A few points:

- You can center text vertically in a container, but NOT on the browser window. The web is not designed for centering objects on the screen vertically. Web pages start at the top, and grow down enough to display the content. Different browsers, screen resolutions, and window sizes make it impossible to center objects on the screen in a way that works on all computers.

- Don't use pixel counts to define sizes. Use points or percentages.

- Divs are box objects, not text containers. Use p tags for text.

MidiMagic

Nearly a Senior Poster

3,319 posts since Jan 2007

Reputation Points: 730

Solved Threads: 182

3 Years Ago

0

Here is one that really works, even on IE!!!!!! From: css-tricks.com
to set in the exact center of the page(if you change it you can have it vertically or horizontally centered):
div { height:200; width:100; position: absolute; top:50%; left: 50%; margin-top: -100px; margin-left: -50px; }
What css-tricks did was to set the top left corner on the exact center of the page, and then, move it backwards by half its height and width using negative margins.

I would have to disagree with MidiMagic, you can easily return the height of a screen resolution(with a script that can run from the browser) and then use percentages, like Mr.css-tricks.

ccube921

Junior Poster in Training

93 posts since Oct 2008

Reputation Points: 13

Solved Threads: 6

3 Years Ago

0

Reading the screen resolution works only if you have scripting available. If scripting is turned off, it won't center because the script won't run.

Negative margins and other attributes are nonstandard, and do not work the same in different browsers.

Why can't people accept the fact that the web is not intended to have vertical centering on a screen? If it had been intended to have vertical centering, vertical centering would have been provided.

The real question is what happens to the rest of the content if it won't fit on the artificially centered page with a smaller resolution than the design calls for.

MidiMagic

Nearly a Senior Poster

3,319 posts since Jan 2007

Reputation Points: 730

Solved Threads: 182

3 Years Ago

0

Why can't people accept the fact that the web is not intended to have vertical centering on a screen? If it had been intended to have vertical centering, vertical centering would have been provided..

I came up with this method for vertically aligning a div in body:

<html>

	<head>
        <title>Center Align</title>
        <style>
           .btable {
                position: absolute;
                width: 100%;
                height: 100%;
                border: 1px solid #ccc;
               
           }
           
           #center {
                background-color: red;
                width: 200px;
                
           }
        </style>
        <script>
          
           
        </script>
    </head>
	<body>
		
        <table class='btable'>
            <tbody>
                <tr >
                    <td >
                         <div id="center">I am middle aligned</div>
                    </td>
                </tr>
            </tbody>
        </table>
	</body>
</html>

Luckychap

Posting Pro in Training

444 posts since Aug 2006

Reputation Points: 83

Solved Threads: 61

3 Years Ago

0

PEOPLE WITH SCRIPTS TURNED OFF DO NOT DESERVE TO UISE THE INTERNET!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
(in my humble opinion, of course)

ccube921

Junior Poster in Training

93 posts since Oct 2008

Reputation Points: 13

Solved Threads: 6

3 Years Ago

0

That doesn't work on all browsers, because different browsers interpret the height of the body as a container differently. Some use the height of the content, others use the height of the window, and still others ignore a height attribute entirely when the container is the body.

The btable style won't even be the same in IE and FF. FF will render it 2 pixels larger in all directions than IE will.

MidiMagic

Nearly a Senior Poster

3,319 posts since Jan 2007

Reputation Points: 730

Solved Threads: 182

3 Years Ago

0

PEOPLE WITH SCRIPTS TURNED OFF DO NOT DESERVE TO UISE THE INTERNET!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! (in my humble opinion, of course)

And what about people misusing script capabilities to spread havoc on others machines, what do they deserve?
Every coin has two faces...

peter_budo

Code tags enforcer

Moderator

15,436 posts since Dec 2004

Reputation Points: 2,806

Solved Threads: 902

3 Years Ago

0

Well, that is what you have protection software for; to discern what is a safe script and what isn't, that does NOT mean turning off scripts altogether!

ccube921

Junior Poster in Training

93 posts since Oct 2008

Reputation Points: 13

Solved Threads: 6

3 Years Ago

0

All same here, it doesn't mean you have to produce scripts for every little thing. There are other technologies that can also handle this and often more efficient...

peter_budo

Code tags enforcer

Moderator

15,436 posts since Dec 2004

Reputation Points: 2,806

Solved Threads: 902

3 Years Ago

0

Well anyway the percent script is built in to almost all browsers, and you dont need to write it(even if someones scripting is off percents still work).

ccube921

Junior Poster in Training

93 posts since Oct 2008

Reputation Points: 13

Solved Threads: 6

1 Year Ago

0

text middle

dummoy

Newbie Poster

1 post since Mar 2011

Reputation Points: 10

Solved Threads: 0

How to set middle align for <div> without using padding

This question has already been solved