I've to align some text in the center of the page with div tag.
div#foo { text-align:center; }
to align the text within the div or
div#foo { width:100px; margin:0 auto; }
to make the div 100px width and horizontally center it.
You could set the style of the div to be:
<div style="width: 250px; margin-left:auto; margin-right:auto;">TEXT</div>
You can also place that style in a CSS class and set the class of the div to whatever you named it.
EDIT: If you include a width for the div, it centers...
You can try <div align="center">...</div>
Simply use the following styling:
div {margin:0 auto;}
Related
Here is an example:
p, span, div,img {
text-align: center;
}
<p>Para</p>
<span>Span</span>
<div>Div</div>
<img src="https://www.google.com/images/nav_logo195.png" />
<div><img src="https://www.google.com/images/nav_logo195.png" /></div>
I found apply text-align: center on img directly doesn't work.
Does this mean it has to be wrapped in an empty div when a centered image is needed?
Is there a better way to do this?
text-align aligns the text (and other inline) content inside the element to which it is applied.
There is no content inside an image.
You can either:
Make the image display as a block and then use auto margins
Put it inside any block element (it doesn't have to be a div, but that's usually the most sensible choice if you are just centring it) and set text-align on that container.
text-align: center centers horizontally inline content of the container it is applied to. So yes, to center image (inline layout) inside container (block layout), you should apply this css to container, not image.
If you want to center an img use:
img {
display: block;
margin 0 auto;
}
Instead of using the text-align on img tag, use it on div
p, span, div,img {
text-align: center;
}
#testimg {
width:100%;
position:absolute;
overflow:auto;
top:50px;
height: 100%;
}
<div id="testimg">
<img src="https://www.google.com/images/nav_logo195.png" />
</div>
I would want to insert a button within an image using CSS; the image has a fixed width and height, centered in the page.
The button must remain stationary within the image at different resolution.
CSS doesn't allow other elements inside an <img> tag. My common go-to in this situation is put both your image and button inside two wrapper <div> elements that act like a table (vertically and horizontally centered). Like so;
HTML
<div class="wrapper">
<div>
<img src="[your image src]">
<a class="button" href="[go to page]">Button</a>
</div>
</div>
CSS
.wrapper{
display: table;
width: 100%; /* Add or remove this depending on your layout */
}
.wrapper > div{
display: table-cell;
vertical-align: middle;
text-align: center;
}
As long as the image has no size constraints this should sit flush in the center of the image :). Enjoy!
EDIT ---
Alternatively, remove the <img> tag and put it as a background-image of .wrapper and use background-size: cover; to center it :). Then you can control the height and width of the image really easily.
Remember to use vendor prefixes too. I have a handy list of them here although they are in Sass.
in your CSS:
myImage {
background-image:url('image.jpg');
background-size:cover;
}
be sure to give your button an ID
in your HTML
<button id='myImage' type='submit'> </button>
To put the button in the position where you want it, simply give it some margins:
.wrapper button {
margin-left:81%; margin-top:3%;
}
But I believe you want the div with the background image to never be larger than the window, right? In that case, you will need some more CSS: set a max-width and a max-height on the div, and then you will also need to set both html and body to a fixed width and height, otherwise max-width and max-height won't know what they ought to be relative to.
So, that's
html, body {width:100%; height:100%; margin:0; padding:0;}
.wrapper {
(..)
margin:0 auto;
max-width:100%; max-height:100%;
}
See updated fiddle.
Here's my stripped-down code:
<style>
div{
height:100px;
background-color:black;
}
span{
font-size:60pt;
background-color:yellow;
}
img{
height:100px;
background-color:yellow;
}
</style>
<div>
<span>ASDF</span>
<img src="foo"/>
</div>
(fiddle: http://jsfiddle.net/pM2jE/)
How come the "ASDF" is misaligned with the rest of the DIV??
I suspect, somehow, that the bottom of the word "ASDF" is aligning with the rest of the DIV, and so the SPAN as a whole doesn't actually match up. I have no idea how to fix this.
Add this css to your image class
vertical-align: top;
By default, the vertical-align for a span is "baseline", which will align the contained text to the bottom of the parent container. Adding a:
vertical-align: top;
CSS property will align the top of the text to the top of the containing div.
use float:left or float: right in your this might help you align your span and div
Why does the parent div of the image have a few extra pixels at the bottom. How can I remove the pixels without hard code the parent div height.
http://jsfiddle.net/6x8Dm/
HTML
<div class="wrapper">
<div class="column">
<img src="http://www.lorempixel.com/200/200/" />
</div>
</div>
CSS
.wrapper {
width:200px;
margin:0 auto;
}
.column {
width:100%;
background:#cc0000;
}
img {
width:100%;
}
That space actually is a result of descender elements in fonts. You can get rid of it in a number of ways:
add a vertical-align:top rule to the image jsFiddle example
add font-size:0; to the containing div jsFiddle example
add display:block; to the image jsFiddle example
One way is by setting display:block on the img, causing it to fill the parent.
jsFiddle here - it works.
img {
width:100%;
display:block;
}
Alternatively, if you don't like that approach, you can also change the vertical alignment, as the default is baseline.
I'm trying to centre align an image using a div and a CSS class (the tag is wrapped in a div class="center" tag). What I'm using at the moment is working in Dreamweaver (when I go to design view) but not when I load the page up in Safari. Here is my code:
.center {
display:inline;
text-align:center;
-webkit-inline;
-webkit-center;
background-color:transparent;
}
Sorry for asking such a simple question, I'm completely new to HTML, my experience is in Objective-C.
text-align: center caused the content to be centered (within the container), and not the container itself being centered.
Since you use display: inline, the size of the container will be the same as its content, and the centering will not have the effect you're after.
Either, you use the margin: 0 auto to center the container (towards its parent container), OR you change display: inline to display: block.
Give text-align:center; to it's .center parent DIV. Write like this:
HTML
<div class="parent">
<div class="center"></div>
</div>
CSS
.parent{
text-align:center;
}
.center {
display:inline;
background-color:transparent;
}
You can use margin : 0 auto , to a vertical align , but if you want a vertical-horizontal align , you need a code like this:
.center{
width:200px;
height:200px;
margin-left:-100px;
margin-top:-200px;
position:absolute;
top :50%;
left:50%;
}
margin: 0 auto. Is what you're looking for. You'll need a width also.
div.center { margin:0 auto; width: 20%;background:orange;}