[HELP] How to align DIV in the center?

xarzu · Oct 19, 2011

David Dorward said:
Sypher wrote:

> I have a webpage with a DIV, that contains other 3 divs ...
> How can i align the container DIV in the middle of the webpage?
> It has not a "align" attribute ...

http://dorward.me.uk/www/centre/

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

This did not work.

Following their suggestions to put

HTML:

style="margin-left: auto; text-align:center; margin-right: auto;"

with the div control, did not center anything.

I even tried it in a number of places and it still did not center the control:

HTML:

<body><center>
    <form id="form1" runat="server" style="height:100%; margin-left: auto; text-align:center; margin-right: auto;">
    <center>
    <div id="silverlightControlHost" style="margin-left: auto; text-align:center; margin-right: auto;">
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%" style="margin-left: auto; text-align:center; margin-right: auto;">
		  <param name="source" value="Bin/Debug/SilverlightApplicationThree.xap"/>
		  <param name="onError" value="onSilverlightError" />
		  <param name="background" value="white" />
		  <param name="minRuntimeVersion" value="4.0.50826.0" />
		  <param name="autoUpgrade" value="true" />
		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
		  </a>
	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>
        </div>
        </center>
    </form>
    </center>
</body>

xarzu · Oct 19, 2011

Richard said:
On Fri, 28 Jan 2005 17:12:30 GMT Sypher wrote:

> I have a webpage with a DIV, that contains other 3 divs ...
> How can i align the container DIV in the middle of the webpage?
> It has not a "align" attribute ...
> Please, someone help! ;P Im losing my sleep for this! ;P

Actually, it's quite simple.
<center><div style="text-align:left;">This text will appear in the center of
the page</div></center>.

div.sample { text-align:left; border:2px solid black; width:100px;
height:100px;}

<center><div class="sample">This is a sample centered
division</div></center>

I tried this and it did nothing.

xarzu · Oct 19, 2011

Richard said:
On Fri, 28 Jan 2005 17:12:30 GMT Sypher wrote:

> I have a webpage with a DIV, that contains other 3 divs ...
> How can i align the container DIV in the middle of the webpage?
> It has not a "align" attribute ...
> Please, someone help! ;P Im losing my sleep for this! ;P

margin:30%;
padding:30%;

for css that would be "text-align:" not "align".
Which also places any text in the same justification.
So if you use text-align for the container, then use it to readjust your
inner divisions accordingly.

Also search for "centering divisions on page".

This made my control disappear !! THe worst advice so far:

<

Code:

body><center>
    <form id="form1" runat="server" style="height:100%; margin-left: auto; text-align:center; margin-right: auto;">
    <center>
    <div id="silverlightControlHost" style="margin-left: auto; text-align:center; margin-right: auto;">
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%" style="margin-left: auto; text-align:center; margin-right: auto;">
		  <param name="source" value="Bin/Debug/SilverlightApplicationThree.xap"/>
		  <param name="onError" value="onSilverlightError" />
		  <param name="background" value="white" />
		  <param name="minRuntimeVersion" value="4.0.50826.0" />
		  <param name="autoUpgrade" value="true" />
		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
		  </a>
	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>
        </div>
        </center>
    </form>
    </center>
</body>

Center div horizontally and vertically	3	Sep 20, 2023
<div> help	1	Mar 4, 2024
Align to the side of my site	7	Oct 11, 2021
How to align this text below image.	3	May 1, 2023
Clickable Div Block	1	Oct 13, 2023
Div placement	2	Jul 17, 2023
Troubles with Fullpage / please help	0	Dec 14, 2023
How to have two html audio players on one page?	0	May 3, 2022

[HELP] How to align DIV in the center?

xarzu

xarzu

xarzu

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads