Align contents inside a div
up vote
136
down vote
favorite
I use css style text-align to align contents inside a container in HTML. This works fine while the content is text or the browser is IE. But otherwise it does not work.
Also as the name suggests it is used basically to align text. The align property has been deprecated long back.
Is there any other way to align contents in html?
html css text-align
asked Mar 26 '09 at 5:35
Hemanshu Bhojak
7,774133856
add a comment |
up vote
136
down vote
favorite
I use css style text-align to align contents inside a container in HTML. This works fine while the content is text or the browser is IE. But otherwise it does not work.
Also as the name suggests it is used basically to align text. The align property has been deprecated long back.
Is there any other way to align contents in html?
html css text-align
asked Mar 26 '09 at 5:35
Hemanshu Bhojak
7,774133856
Give us more info please? past the code which is not working in other browsers.
– Shoban
Mar 26 '09 at 5:41
You should give an example of your markup so people know what you're trying to do. Otherwise, your question is ambiguous.
– levik
Mar 26 '09 at 5:41
add a comment |
up vote
136
down vote
favorite
up vote
136
down vote
favorite
I use css style text-align to align contents inside a container in HTML. This works fine while the content is text or the browser is IE. But otherwise it does not work.
Also as the name suggests it is used basically to align text. The align property has been deprecated long back.
Is there any other way to align contents in html?
html css text-align
asked Mar 26 '09 at 5:35
Hemanshu Bhojak
7,774133856
I use css style text-align to align contents inside a container in HTML. This works fine while the content is text or the browser is IE. But otherwise it does not work.
Also as the name suggests it is used basically to align text. The align property has been deprecated long back.
Is there any other way to align contents in html?
html css text-align
html css text-align
asked Mar 26 '09 at 5:35
Hemanshu Bhojak
7,774133856
asked Mar 26 '09 at 5:35
Hemanshu Bhojak
7,774133856
asked Mar 26 '09 at 5:35
Hemanshu Bhojak
7,774133856
asked Mar 26 '09 at 5:35
Hemanshu Bhojak
7,774133856
asked Mar 26 '09 at 5:35
Hemanshu Bhojak
7,774133856
7,774133856
Give us more info please? past the code which is not working in other browsers.
– Shoban
Mar 26 '09 at 5:41
You should give an example of your markup so people know what you're trying to do. Otherwise, your question is ambiguous.
– levik
Mar 26 '09 at 5:41
add a comment |
Give us more info please? past the code which is not working in other browsers.
– Shoban
Mar 26 '09 at 5:41
You should give an example of your markup so people know what you're trying to do. Otherwise, your question is ambiguous.
– levik
Mar 26 '09 at 5:41
Give us more info please? past the code which is not working in other browsers.
– Shoban
Mar 26 '09 at 5:41
Give us more info please? past the code which is not working in other browsers.
– Shoban
Mar 26 '09 at 5:41
You should give an example of your markup so people know what you're trying to do. Otherwise, your question is ambiguous.
– levik
Mar 26 '09 at 5:41
You should give an example of your markup so people know what you're trying to do. Otherwise, your question is ambiguous.
– levik
Mar 26 '09 at 5:41
add a comment |
7 Answers
7
active
oldest
votes
up vote
198
down vote
accepted
text-align aligns text and other inline content. It doesn't align block element children.
To do that, you want to give the element you want aligned a width, with ‘auto’ left and right margins. This is the standards-compliant way that works everywhere except IE5.x.
<div style="width: 50%; margin: 0 auto;">Hello</div>
For this to work in IE6, you need to make sure Standards Mode is on by using a suitable DOCTYPE.
If you really need to support IE5/Quirks Mode, which these days you shouldn't really, it is possible to combine the two different approaches to centering:
<div style="text-align: center">
<div style="width: 50%; margin: 0 auto; text-align: left">Hello</div>
</div>
(Obviously, styles are best put inside a stylesheet, but the inline version is illustrative.)
answered Mar 26 '09 at 5:46
bobince
437k88563763
2
If you don't know the div width, which is often the case, this solution works perfectly in all browsers: matthewjamestaylor.com/blog/…
– Artem Russakovskii
Jan 28 '10 at 8:35
I used <div style="width: 100%; margin: 0 auto;">Hello</div>
– Aamol
Aug 9 '17 at 7:26
add a comment |
up vote
8
down vote
You can do it like this also:
HTML
<body>
<div id="wrapper_1">
<div id="container_1"></div>
</div>
</body>
CSS
body width: 100%; margin: 0; padding: 0; overflow: hidden;
#wrapper_1 clear: left; float: left; position: relative; left: 50%;
#container_1 display: block; float: left; position: relative; right: 50%;
As Artem Russakovskii mentioned also, read the original article by Mattew James Taylor for full description.
edited Apr 3 '16 at 10:42
msrd0
4,04762343
answered Dec 22 '12 at 19:46
Mahdi
5,86563860
add a comment |
up vote
5
down vote
Honestly, I hate all the solutions I've seen so far, and I'll tell you why: They just don't seem to ever align it right...so here's what I usually do:
I know what pixel values each div and their respective margins hold...so I do the following.
I'll create a wrapper div that has an absolute position and a left value of 50%...so this div now starts in the middle of the screen, and then I subtract half of all the content of the div's width...and I get BEAUTIFULLY scaling content...and I think this works across all browsers, too. Try it for yourself (this example assumes all content on your site is wrapped in a div tag that uses this wrapper class and all content in it is 200px in width):
.wrapper
position: absolute;
left: 50%;
margin-left: -100px;
EDIT: I forgot to add...you may also want to set width: 0px; on this wrapper div for some browsers to not show the scrollbars, and then you may use absolute positioning for all inner divs.
This also works AMAZING for vertically aligning your content as well using top: 50% and margin-top. Cheers!
answered Aug 4 '13 at 18:21
Alexandru
5,566665141
add a comment |
up vote
4
down vote
<div class="content">Hello</div>
.content
margin-top:auto;
margin-bottom:auto;
text-align:center;
edited Oct 27 '16 at 15:30
krlzlx
4,489143144
answered Oct 27 '16 at 15:07
krithi k
563
1
While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.
– andreas
Oct 29 '16 at 10:40
Sorry , Above code will align a div center with in the parent content
– krithi k
Nov 23 '16 at 12:25
add a comment |
up vote
2
down vote
Here is a technique I use that has worked well:
<div>
<div style="display: table-cell; width: 100%"> </div>
<div style="display: table-cell; white-space: nowrap;">Something Here</div>
</div>answered Jun 11 '15 at 12:00
Bloodhound
1,69111226
add a comment |
up vote
0
down vote
All the answers talk about horizontal align.
For vertical aligning multiple content elements, take a look at this approach:
<div style="display: flex; align-items: center; width: 200px; height: 140px; padding: 10px 40px; border: solid 1px black;">
<div>
<p>Paragraph #1</p>
<p>Paragraph #2</p>
</div>
</div>answered Nov 10 at 15:14
Nicolas
292416
add a comment |
up vote
-1
down vote
Just another example using HTML and CSS:
<div style="width: Auto; margin: 0 auto;">Hello</div>
edited Apr 12 '17 at 14:43
jony
9401432
answered Aug 17 '12 at 13:06
Diogo
163211
27
None of what you wrote is specific to ASP.NET. It is just HTML and inline CSS. Did you mean to write out a server control with properties?
– webworm
Sep 4 '12 at 1:25
Fixed. The answer now mentions the correct technologies.
– jony
Apr 16 '17 at 23:00
add a comment |
protected by Flexo♦ May 23 '12 at 16:59
Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).
Would you like to answer one of these unanswered questions instead?
7 Answers
7
active
oldest
votes
7 Answers
7
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
198
down vote
accepted
text-align aligns text and other inline content. It doesn't align block element children.
To do that, you want to give the element you want aligned a width, with ‘auto’ left and right margins. This is the standards-compliant way that works everywhere except IE5.x.
<div style="width: 50%; margin: 0 auto;">Hello</div>
For this to work in IE6, you need to make sure Standards Mode is on by using a suitable DOCTYPE.
If you really need to support IE5/Quirks Mode, which these days you shouldn't really, it is possible to combine the two different approaches to centering:
<div style="text-align: center">
<div style="width: 50%; margin: 0 auto; text-align: left">Hello</div>
</div>
(Obviously, styles are best put inside a stylesheet, but the inline version is illustrative.)
answered Mar 26 '09 at 5:46
bobince
437k88563763
2
If you don't know the div width, which is often the case, this solution works perfectly in all browsers: matthewjamestaylor.com/blog/…
– Artem Russakovskii
Jan 28 '10 at 8:35
I used <div style="width: 100%; margin: 0 auto;">Hello</div>
– Aamol
Aug 9 '17 at 7:26
add a comment |
up vote
198
down vote
accepted
text-align aligns text and other inline content. It doesn't align block element children.
To do that, you want to give the element you want aligned a width, with ‘auto’ left and right margins. This is the standards-compliant way that works everywhere except IE5.x.
<div style="width: 50%; margin: 0 auto;">Hello</div>
For this to work in IE6, you need to make sure Standards Mode is on by using a suitable DOCTYPE.
If you really need to support IE5/Quirks Mode, which these days you shouldn't really, it is possible to combine the two different approaches to centering:
<div style="text-align: center">
<div style="width: 50%; margin: 0 auto; text-align: left">Hello</div>
</div>
(Obviously, styles are best put inside a stylesheet, but the inline version is illustrative.)
answered Mar 26 '09 at 5:46
bobince
437k88563763
2
If you don't know the div width, which is often the case, this solution works perfectly in all browsers: matthewjamestaylor.com/blog/…
– Artem Russakovskii
Jan 28 '10 at 8:35
I used <div style="width: 100%; margin: 0 auto;">Hello</div>
– Aamol
Aug 9 '17 at 7:26
add a comment |
up vote
198
down vote
accepted
up vote
198
down vote
accepted
text-align aligns text and other inline content. It doesn't align block element children.
To do that, you want to give the element you want aligned a width, with ‘auto’ left and right margins. This is the standards-compliant way that works everywhere except IE5.x.
<div style="width: 50%; margin: 0 auto;">Hello</div>
For this to work in IE6, you need to make sure Standards Mode is on by using a suitable DOCTYPE.
If you really need to support IE5/Quirks Mode, which these days you shouldn't really, it is possible to combine the two different approaches to centering:
<div style="text-align: center">
<div style="width: 50%; margin: 0 auto; text-align: left">Hello</div>
</div>
(Obviously, styles are best put inside a stylesheet, but the inline version is illustrative.)
answered Mar 26 '09 at 5:46
bobince
437k88563763
text-align aligns text and other inline content. It doesn't align block element children.
To do that, you want to give the element you want aligned a width, with ‘auto’ left and right margins. This is the standards-compliant way that works everywhere except IE5.x.
<div style="width: 50%; margin: 0 auto;">Hello</div>
For this to work in IE6, you need to make sure Standards Mode is on by using a suitable DOCTYPE.
If you really need to support IE5/Quirks Mode, which these days you shouldn't really, it is possible to combine the two different approaches to centering:
<div style="text-align: center">
<div style="width: 50%; margin: 0 auto; text-align: left">Hello</div>
</div>
(Obviously, styles are best put inside a stylesheet, but the inline version is illustrative.)
answered Mar 26 '09 at 5:46
bobince
437k88563763
answered Mar 26 '09 at 5:46
bobince
437k88563763
answered Mar 26 '09 at 5:46
bobince
437k88563763
answered Mar 26 '09 at 5:46
bobince
437k88563763
437k88563763
2
If you don't know the div width, which is often the case, this solution works perfectly in all browsers: matthewjamestaylor.com/blog/…
– Artem Russakovskii
Jan 28 '10 at 8:35
I used <div style="width: 100%; margin: 0 auto;">Hello</div>
– Aamol
Aug 9 '17 at 7:26
add a comment |
2
If you don't know the div width, which is often the case, this solution works perfectly in all browsers: matthewjamestaylor.com/blog/…
– Artem Russakovskii
Jan 28 '10 at 8:35
I used <div style="width: 100%; margin: 0 auto;">Hello</div>
– Aamol
Aug 9 '17 at 7:26
2
2
If you don't know the div width, which is often the case, this solution works perfectly in all browsers: matthewjamestaylor.com/blog/…
– Artem Russakovskii
Jan 28 '10 at 8:35
If you don't know the div width, which is often the case, this solution works perfectly in all browsers: matthewjamestaylor.com/blog/…
– Artem Russakovskii
Jan 28 '10 at 8:35
I used <div style="width: 100%; margin: 0 auto;">Hello</div>
– Aamol
Aug 9 '17 at 7:26
I used <div style="width: 100%; margin: 0 auto;">Hello</div>
– Aamol
Aug 9 '17 at 7:26
add a comment |
up vote
8
down vote
You can do it like this also:
HTML
<body>
<div id="wrapper_1">
<div id="container_1"></div>
</div>
</body>
CSS
body width: 100%; margin: 0; padding: 0; overflow: hidden;
#wrapper_1 clear: left; float: left; position: relative; left: 50%;
#container_1 display: block; float: left; position: relative; right: 50%;
As Artem Russakovskii mentioned also, read the original article by Mattew James Taylor for full description.
edited Apr 3 '16 at 10:42
msrd0
4,04762343
answered Dec 22 '12 at 19:46
Mahdi
5,86563860
add a comment |
up vote
8
down vote
You can do it like this also:
HTML
<body>
<div id="wrapper_1">
<div id="container_1"></div>
</div>
</body>
CSS
body width: 100%; margin: 0; padding: 0; overflow: hidden;
#wrapper_1 clear: left; float: left; position: relative; left: 50%;
#container_1 display: block; float: left; position: relative; right: 50%;
As Artem Russakovskii mentioned also, read the original article by Mattew James Taylor for full description.
edited Apr 3 '16 at 10:42
msrd0
4,04762343
answered Dec 22 '12 at 19:46
Mahdi
5,86563860
add a comment |
up vote
8
down vote
up vote
8
down vote
You can do it like this also:
HTML
<body>
<div id="wrapper_1">
<div id="container_1"></div>
</div>
</body>
CSS
body width: 100%; margin: 0; padding: 0; overflow: hidden;
#wrapper_1 clear: left; float: left; position: relative; left: 50%;
#container_1 display: block; float: left; position: relative; right: 50%;
As Artem Russakovskii mentioned also, read the original article by Mattew James Taylor for full description.
edited Apr 3 '16 at 10:42
msrd0
4,04762343
answered Dec 22 '12 at 19:46
Mahdi
5,86563860
You can do it like this also:
HTML
<body>
<div id="wrapper_1">
<div id="container_1"></div>
</div>
</body>
CSS
body width: 100%; margin: 0; padding: 0; overflow: hidden;
#wrapper_1 clear: left; float: left; position: relative; left: 50%;
#container_1 display: block; float: left; position: relative; right: 50%;
As Artem Russakovskii mentioned also, read the original article by Mattew James Taylor for full description.
edited Apr 3 '16 at 10:42
msrd0
4,04762343
answered Dec 22 '12 at 19:46
Mahdi
5,86563860
edited Apr 3 '16 at 10:42
msrd0
4,04762343
edited Apr 3 '16 at 10:42
msrd0
4,04762343
edited Apr 3 '16 at 10:42
msrd0
4,04762343
4,04762343
answered Dec 22 '12 at 19:46
Mahdi
5,86563860
answered Dec 22 '12 at 19:46
Mahdi
5,86563860
answered Dec 22 '12 at 19:46
Mahdi
5,86563860
5,86563860
add a comment |
add a comment |
up vote
5
down vote
Honestly, I hate all the solutions I've seen so far, and I'll tell you why: They just don't seem to ever align it right...so here's what I usually do:
I know what pixel values each div and their respective margins hold...so I do the following.
I'll create a wrapper div that has an absolute position and a left value of 50%...so this div now starts in the middle of the screen, and then I subtract half of all the content of the div's width...and I get BEAUTIFULLY scaling content...and I think this works across all browsers, too. Try it for yourself (this example assumes all content on your site is wrapped in a div tag that uses this wrapper class and all content in it is 200px in width):
.wrapper
position: absolute;
left: 50%;
margin-left: -100px;
EDIT: I forgot to add...you may also want to set width: 0px; on this wrapper div for some browsers to not show the scrollbars, and then you may use absolute positioning for all inner divs.
This also works AMAZING for vertically aligning your content as well using top: 50% and margin-top. Cheers!
answered Aug 4 '13 at 18:21
Alexandru
5,566665141
add a comment |
up vote
5
down vote
Honestly, I hate all the solutions I've seen so far, and I'll tell you why: They just don't seem to ever align it right...so here's what I usually do:
I know what pixel values each div and their respective margins hold...so I do the following.
I'll create a wrapper div that has an absolute position and a left value of 50%...so this div now starts in the middle of the screen, and then I subtract half of all the content of the div's width...and I get BEAUTIFULLY scaling content...and I think this works across all browsers, too. Try it for yourself (this example assumes all content on your site is wrapped in a div tag that uses this wrapper class and all content in it is 200px in width):
.wrapper
position: absolute;
left: 50%;
margin-left: -100px;
EDIT: I forgot to add...you may also want to set width: 0px; on this wrapper div for some browsers to not show the scrollbars, and then you may use absolute positioning for all inner divs.
This also works AMAZING for vertically aligning your content as well using top: 50% and margin-top. Cheers!
answered Aug 4 '13 at 18:21
Alexandru
5,566665141
add a comment |
up vote
5
down vote
up vote
5
down vote
Honestly, I hate all the solutions I've seen so far, and I'll tell you why: They just don't seem to ever align it right...so here's what I usually do:
I know what pixel values each div and their respective margins hold...so I do the following.
I'll create a wrapper div that has an absolute position and a left value of 50%...so this div now starts in the middle of the screen, and then I subtract half of all the content of the div's width...and I get BEAUTIFULLY scaling content...and I think this works across all browsers, too. Try it for yourself (this example assumes all content on your site is wrapped in a div tag that uses this wrapper class and all content in it is 200px in width):
.wrapper
position: absolute;
left: 50%;
margin-left: -100px;
EDIT: I forgot to add...you may also want to set width: 0px; on this wrapper div for some browsers to not show the scrollbars, and then you may use absolute positioning for all inner divs.
This also works AMAZING for vertically aligning your content as well using top: 50% and margin-top. Cheers!
answered Aug 4 '13 at 18:21
Alexandru
5,566665141
Honestly, I hate all the solutions I've seen so far, and I'll tell you why: They just don't seem to ever align it right...so here's what I usually do:
I know what pixel values each div and their respective margins hold...so I do the following.
I'll create a wrapper div that has an absolute position and a left value of 50%...so this div now starts in the middle of the screen, and then I subtract half of all the content of the div's width...and I get BEAUTIFULLY scaling content...and I think this works across all browsers, too. Try it for yourself (this example assumes all content on your site is wrapped in a div tag that uses this wrapper class and all content in it is 200px in width):
.wrapper
position: absolute;
left: 50%;
margin-left: -100px;
EDIT: I forgot to add...you may also want to set width: 0px; on this wrapper div for some browsers to not show the scrollbars, and then you may use absolute positioning for all inner divs.
This also works AMAZING for vertically aligning your content as well using top: 50% and margin-top. Cheers!
answered Aug 4 '13 at 18:21
Alexandru
5,566665141
edited Aug 4 '13 at 19:08
answered Aug 4 '13 at 18:21
Alexandru
5,566665141
answered Aug 4 '13 at 18:21
Alexandru
5,566665141
answered Aug 4 '13 at 18:21
Alexandru
5,566665141
5,566665141
add a comment |
add a comment |
up vote
4
down vote
<div class="content">Hello</div>
.content
margin-top:auto;
margin-bottom:auto;
text-align:center;
edited Oct 27 '16 at 15:30
krlzlx
4,489143144
answered Oct 27 '16 at 15:07
krithi k
563
1
While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.
– andreas
Oct 29 '16 at 10:40
Sorry , Above code will align a div center with in the parent content
– krithi k
Nov 23 '16 at 12:25
add a comment |
up vote
4
down vote
<div class="content">Hello</div>
.content
margin-top:auto;
margin-bottom:auto;
text-align:center;
edited Oct 27 '16 at 15:30
krlzlx
4,489143144
answered Oct 27 '16 at 15:07
krithi k
563
1
While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.
– andreas
Oct 29 '16 at 10:40
Sorry , Above code will align a div center with in the parent content
– krithi k
Nov 23 '16 at 12:25
add a comment |
up vote
4
down vote
up vote
4
down vote
<div class="content">Hello</div>
.content
margin-top:auto;
margin-bottom:auto;
text-align:center;
edited Oct 27 '16 at 15:30
krlzlx
4,489143144
answered Oct 27 '16 at 15:07
krithi k
563
<div class="content">Hello</div>
.content
margin-top:auto;
margin-bottom:auto;
text-align:center;
edited Oct 27 '16 at 15:30
krlzlx
4,489143144
answered Oct 27 '16 at 15:07
krithi k
563
edited Oct 27 '16 at 15:30
krlzlx
4,489143144
edited Oct 27 '16 at 15:30
krlzlx
4,489143144
edited Oct 27 '16 at 15:30
krlzlx
4,489143144
4,489143144
answered Oct 27 '16 at 15:07
krithi k
563
answered Oct 27 '16 at 15:07
krithi k
563
answered Oct 27 '16 at 15:07
krithi k
563
563
1
While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.
– andreas
Oct 29 '16 at 10:40
Sorry , Above code will align a div center with in the parent content
– krithi k
Nov 23 '16 at 12:25
add a comment |
1
While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.
– andreas
Oct 29 '16 at 10:40
Sorry , Above code will align a div center with in the parent content
– krithi k
Nov 23 '16 at 12:25
1
1
While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.
– andreas
Oct 29 '16 at 10:40
While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.
– andreas
Oct 29 '16 at 10:40
Sorry , Above code will align a div center with in the parent content
– krithi k
Nov 23 '16 at 12:25
Sorry , Above code will align a div center with in the parent content
– krithi k
Nov 23 '16 at 12:25
add a comment |
up vote
2
down vote
Here is a technique I use that has worked well:
<div>
<div style="display: table-cell; width: 100%"> </div>
<div style="display: table-cell; white-space: nowrap;">Something Here</div>
</div>answered Jun 11 '15 at 12:00
Bloodhound
1,69111226
add a comment |
up vote
2
down vote
Here is a technique I use that has worked well:
<div>
<div style="display: table-cell; width: 100%"> </div>
<div style="display: table-cell; white-space: nowrap;">Something Here</div>
</div>answered Jun 11 '15 at 12:00
Bloodhound
1,69111226
add a comment |
up vote
2
down vote
up vote
2
down vote
Here is a technique I use that has worked well:
<div>
<div style="display: table-cell; width: 100%"> </div>
<div style="display: table-cell; white-space: nowrap;">Something Here</div>
</div>answered Jun 11 '15 at 12:00
Bloodhound
1,69111226
Here is a technique I use that has worked well:
<div>
<div style="display: table-cell; width: 100%"> </div>
<div style="display: table-cell; white-space: nowrap;">Something Here</div>
</div><div>
<div style="display: table-cell; width: 100%"> </div>
<div style="display: table-cell; white-space: nowrap;">Something Here</div>
</div><div>
<div style="display: table-cell; width: 100%"> </div>
<div style="display: table-cell; white-space: nowrap;">Something Here</div>
</div>answered Jun 11 '15 at 12:00
Bloodhound
1,69111226
answered Jun 11 '15 at 12:00
Bloodhound
1,69111226
answered Jun 11 '15 at 12:00
Bloodhound
1,69111226
answered Jun 11 '15 at 12:00
Bloodhound
1,69111226
1,69111226
add a comment |
add a comment |
up vote
0
down vote
All the answers talk about horizontal align.
For vertical aligning multiple content elements, take a look at this approach:
<div style="display: flex; align-items: center; width: 200px; height: 140px; padding: 10px 40px; border: solid 1px black;">
<div>
<p>Paragraph #1</p>
<p>Paragraph #2</p>
</div>
</div>answered Nov 10 at 15:14
Nicolas
292416
add a comment |
up vote
0
down vote
All the answers talk about horizontal align.
For vertical aligning multiple content elements, take a look at this approach:
<div style="display: flex; align-items: center; width: 200px; height: 140px; padding: 10px 40px; border: solid 1px black;">
<div>
<p>Paragraph #1</p>
<p>Paragraph #2</p>
</div>
</div>answered Nov 10 at 15:14
Nicolas
292416
add a comment |
up vote
0
down vote
up vote
0
down vote
All the answers talk about horizontal align.
For vertical aligning multiple content elements, take a look at this approach:
<div style="display: flex; align-items: center; width: 200px; height: 140px; padding: 10px 40px; border: solid 1px black;">
<div>
<p>Paragraph #1</p>
<p>Paragraph #2</p>
</div>
</div>answered Nov 10 at 15:14
Nicolas
292416
All the answers talk about horizontal align.
For vertical aligning multiple content elements, take a look at this approach:
<div style="display: flex; align-items: center; width: 200px; height: 140px; padding: 10px 40px; border: solid 1px black;">
<div>
<p>Paragraph #1</p>
<p>Paragraph #2</p>
</div>
</div><div style="display: flex; align-items: center; width: 200px; height: 140px; padding: 10px 40px; border: solid 1px black;">
<div>
<p>Paragraph #1</p>
<p>Paragraph #2</p>
</div>
</div><div style="display: flex; align-items: center; width: 200px; height: 140px; padding: 10px 40px; border: solid 1px black;">
<div>
<p>Paragraph #1</p>
<p>Paragraph #2</p>
</div>
</div>answered Nov 10 at 15:14
Nicolas
292416
answered Nov 10 at 15:14
Nicolas
292416
answered Nov 10 at 15:14
Nicolas
292416
answered Nov 10 at 15:14
Nicolas
292416
292416
add a comment |
add a comment |
up vote
-1
down vote
Just another example using HTML and CSS:
<div style="width: Auto; margin: 0 auto;">Hello</div>
edited Apr 12 '17 at 14:43
jony
9401432
answered Aug 17 '12 at 13:06
Diogo
163211
27
None of what you wrote is specific to ASP.NET. It is just HTML and inline CSS. Did you mean to write out a server control with properties?
– webworm
Sep 4 '12 at 1:25
Fixed. The answer now mentions the correct technologies.
– jony
Apr 16 '17 at 23:00
add a comment |
up vote
-1
down vote
Just another example using HTML and CSS:
<div style="width: Auto; margin: 0 auto;">Hello</div>
edited Apr 12 '17 at 14:43
jony
9401432
answered Aug 17 '12 at 13:06
Diogo
163211
27
None of what you wrote is specific to ASP.NET. It is just HTML and inline CSS. Did you mean to write out a server control with properties?
– webworm
Sep 4 '12 at 1:25
Fixed. The answer now mentions the correct technologies.
– jony
Apr 16 '17 at 23:00
add a comment |
up vote
-1
down vote
up vote
-1
down vote
Just another example using HTML and CSS:
<div style="width: Auto; margin: 0 auto;">Hello</div>
edited Apr 12 '17 at 14:43
jony
9401432
answered Aug 17 '12 at 13:06
Diogo
163211
Just another example using HTML and CSS:
<div style="width: Auto; margin: 0 auto;">Hello</div>
edited Apr 12 '17 at 14:43
jony
9401432
answered Aug 17 '12 at 13:06
Diogo
163211
edited Apr 12 '17 at 14:43
jony
9401432
edited Apr 12 '17 at 14:43
jony
9401432
edited Apr 12 '17 at 14:43
jony
9401432
9401432
answered Aug 17 '12 at 13:06
Diogo
163211
answered Aug 17 '12 at 13:06
Diogo
163211
answered Aug 17 '12 at 13:06
Diogo
163211
163211
27
None of what you wrote is specific to ASP.NET. It is just HTML and inline CSS. Did you mean to write out a server control with properties?
– webworm
Sep 4 '12 at 1:25
Fixed. The answer now mentions the correct technologies.
– jony
Apr 16 '17 at 23:00
add a comment |
27
None of what you wrote is specific to ASP.NET. It is just HTML and inline CSS. Did you mean to write out a server control with properties?
– webworm
Sep 4 '12 at 1:25
Fixed. The answer now mentions the correct technologies.
– jony
Apr 16 '17 at 23:00
27
27
None of what you wrote is specific to ASP.NET. It is just HTML and inline CSS. Did you mean to write out a server control with properties?
– webworm
Sep 4 '12 at 1:25
None of what you wrote is specific to ASP.NET. It is just HTML and inline CSS. Did you mean to write out a server control with properties?
– webworm
Sep 4 '12 at 1:25
Fixed. The answer now mentions the correct technologies.
– jony
Apr 16 '17 at 23:00
Fixed. The answer now mentions the correct technologies.
– jony
Apr 16 '17 at 23:00
add a comment |
protected by Flexo♦ May 23 '12 at 16:59
Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).
Would you like to answer one of these unanswered questions instead?
Give us more info please? past the code which is not working in other browsers.
– Shoban
Mar 26 '09 at 5:41
You should give an example of your markup so people know what you're trying to do. Otherwise, your question is ambiguous.
– levik
Mar 26 '09 at 5:41