Align contents inside a div
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 BhojakHemanshu Bhojak
7,874133956
add a comment |
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 BhojakHemanshu Bhojak
7,874133956
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 |
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 BhojakHemanshu Bhojak
7,874133956
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 BhojakHemanshu Bhojak
7,874133956
asked Mar 26 '09 at 5:35
Hemanshu BhojakHemanshu Bhojak
7,874133956
asked Mar 26 '09 at 5:35
Hemanshu BhojakHemanshu Bhojak
7,874133956
asked Mar 26 '09 at 5:35
Hemanshu BhojakHemanshu Bhojak
7,874133956
asked Mar 26 '09 at 5:35
Hemanshu BhojakHemanshu Bhojak
7,874133956
7,874133956
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
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
bobincebobince
441k89570766
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 |
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,11262344
answered Dec 22 '12 at 19:46
MahdiMahdi
5,95063960
add a comment |
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
AlexandruAlexandru
5,751668143
add a comment |
<div class="content">Hello</div>
.content
margin-top:auto;
margin-bottom:auto;
text-align:center;
edited Oct 27 '16 at 15:30
krlzlx
4,544143144
answered Oct 27 '16 at 15:07
krithi kkrithi 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 |
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
BloodhoundBloodhound
1,69111226
add a comment |
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 '18 at 15:14
NicolasNicolas
331416
add a comment |
Just another example using HTML and CSS:
<div style="width: Auto; margin: 0 auto;">Hello</div>
edited Apr 12 '17 at 14:43
jony
9591435
answered Aug 17 '12 at 13:06
DiogoDiogo
173311
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
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
bobincebobince
441k89570766
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 |
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
bobincebobince
441k89570766
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 |
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
bobincebobince
441k89570766
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
bobincebobince
441k89570766
answered Mar 26 '09 at 5:46
bobincebobince
441k89570766
answered Mar 26 '09 at 5:46
bobincebobince
441k89570766
answered Mar 26 '09 at 5:46
bobincebobince
441k89570766
441k89570766
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 |
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,11262344
answered Dec 22 '12 at 19:46
MahdiMahdi
5,95063960
add a comment |
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,11262344
answered Dec 22 '12 at 19:46
MahdiMahdi
5,95063960
add a comment |
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,11262344
answered Dec 22 '12 at 19:46
MahdiMahdi
5,95063960
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,11262344
answered Dec 22 '12 at 19:46
MahdiMahdi
5,95063960
edited Apr 3 '16 at 10:42
msrd0
4,11262344
edited Apr 3 '16 at 10:42
msrd0
4,11262344
edited Apr 3 '16 at 10:42
msrd0
4,11262344
4,11262344
answered Dec 22 '12 at 19:46
MahdiMahdi
5,95063960
answered Dec 22 '12 at 19:46
MahdiMahdi
5,95063960
answered Dec 22 '12 at 19:46
MahdiMahdi
5,95063960
5,95063960
add a comment |
add a comment |
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
AlexandruAlexandru
5,751668143
add a comment |
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
AlexandruAlexandru
5,751668143
add a comment |
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
AlexandruAlexandru
5,751668143
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
AlexandruAlexandru
5,751668143
edited Aug 4 '13 at 19:08
answered Aug 4 '13 at 18:21
AlexandruAlexandru
5,751668143
answered Aug 4 '13 at 18:21
AlexandruAlexandru
5,751668143
answered Aug 4 '13 at 18:21
AlexandruAlexandru
5,751668143
5,751668143
add a comment |
add a comment |
<div class="content">Hello</div>
.content
margin-top:auto;
margin-bottom:auto;
text-align:center;
edited Oct 27 '16 at 15:30
krlzlx
4,544143144
answered Oct 27 '16 at 15:07
krithi kkrithi 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 |
<div class="content">Hello</div>
.content
margin-top:auto;
margin-bottom:auto;
text-align:center;
edited Oct 27 '16 at 15:30
krlzlx
4,544143144
answered Oct 27 '16 at 15:07
krithi kkrithi 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 |
<div class="content">Hello</div>
.content
margin-top:auto;
margin-bottom:auto;
text-align:center;
edited Oct 27 '16 at 15:30
krlzlx
4,544143144
answered Oct 27 '16 at 15:07
krithi kkrithi 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,544143144
answered Oct 27 '16 at 15:07
krithi kkrithi k
563
edited Oct 27 '16 at 15:30
krlzlx
4,544143144
edited Oct 27 '16 at 15:30
krlzlx
4,544143144
edited Oct 27 '16 at 15:30
krlzlx
4,544143144
4,544143144
answered Oct 27 '16 at 15:07
krithi kkrithi k
563
answered Oct 27 '16 at 15:07
krithi kkrithi k
563
answered Oct 27 '16 at 15:07
krithi kkrithi 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 |
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
BloodhoundBloodhound
1,69111226
add a comment |
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
BloodhoundBloodhound
1,69111226
add a comment |
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
BloodhoundBloodhound
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
BloodhoundBloodhound
1,69111226
answered Jun 11 '15 at 12:00
BloodhoundBloodhound
1,69111226
answered Jun 11 '15 at 12:00
BloodhoundBloodhound
1,69111226
answered Jun 11 '15 at 12:00
BloodhoundBloodhound
1,69111226
1,69111226
add a comment |
add a comment |
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 '18 at 15:14
NicolasNicolas
331416
add a comment |
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 '18 at 15:14
NicolasNicolas
331416
add a comment |
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 '18 at 15:14
NicolasNicolas
331416
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 '18 at 15:14
NicolasNicolas
331416
answered Nov 10 '18 at 15:14
NicolasNicolas
331416
answered Nov 10 '18 at 15:14
NicolasNicolas
331416
answered Nov 10 '18 at 15:14
NicolasNicolas
331416
331416
add a comment |
add a comment |
Just another example using HTML and CSS:
<div style="width: Auto; margin: 0 auto;">Hello</div>
edited Apr 12 '17 at 14:43
jony
9591435
answered Aug 17 '12 at 13:06
DiogoDiogo
173311
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 |
Just another example using HTML and CSS:
<div style="width: Auto; margin: 0 auto;">Hello</div>
edited Apr 12 '17 at 14:43
jony
9591435
answered Aug 17 '12 at 13:06
DiogoDiogo
173311
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 |
Just another example using HTML and CSS:
<div style="width: Auto; margin: 0 auto;">Hello</div>
edited Apr 12 '17 at 14:43
jony
9591435
answered Aug 17 '12 at 13:06
DiogoDiogo
173311
Just another example using HTML and CSS:
<div style="width: Auto; margin: 0 auto;">Hello</div>
edited Apr 12 '17 at 14:43
jony
9591435
answered Aug 17 '12 at 13:06
DiogoDiogo
173311
edited Apr 12 '17 at 14:43
jony
9591435
edited Apr 12 '17 at 14:43
jony
9591435
edited Apr 12 '17 at 14:43
jony
9591435
9591435
answered Aug 17 '12 at 13:06
DiogoDiogo
173311
answered Aug 17 '12 at 13:06
DiogoDiogo
173311
answered Aug 17 '12 at 13:06
DiogoDiogo
173311
173311
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