I have a div tag in which there is an image in left corner and in the middle of the div tag I want to write title of my web application. But I am not able to set text alignment in middle of the div tag. I tried text-align,valign properties with various values but could not set it. Can you please guide me how to to this.
CSS for my div tag is as below
#head
{
background-color: #EEE685;
overflow: auto;
width: 100%;
text-indent:10;
text-align:justify;
}
You have to use text-align: center;, see this fiddle: http://jsfiddle.net/alp82/e3hgu/
Applying CSS text-align:center to a block element centers its contents.
<div>
<img alt="" src="images/accessbg.jpg" align="left"></img>
<h2 align="center">Test</h2>
</div>
The above code will work for you.
Related
this should be straightforward, but I am missing it. I am attempting to center the text in my wizard h1 tag, by using this css in my stylesheet.css
.h1textalign { text-align:center; }
And I am attempting to apply this class like so:
<asp:Wizard ID="FirstwzSetup" runat="server" CssClass="wizpad" Font-Names="Tahoma" Font-Size="20px" Style="width: 100%; overflow: scroll;" ActiveStepIndex="0">
<WizardSteps>
<asp:WizardStep runat="server" StepType="Start" title="Sponsor Recognition">
<h1 id="h1test" runat="server" class="h1textalign">Test To Center Text</h1>
</asp:WizardStep>
</WizardSteps>
</asp:Wizard>
What is stopping the css class from being applied to the h1 tag?
EDIT
This is a fiddle with an example - my text is not being centered
https://jsfiddle.net/8e8yo28q/
Since header is a block element, you may need to give it a width as well. Also, you can apply the important tag to ensure no other css settings are causing your issue.
h1 {width: 100%; text-align:center !important;}
Just add width:100% to your h1 tag
Try adding border:1px solid black, to your previous css, and you will notice that your h1 is restricted to certain width.
If you add % width to it, i.e 100%, it will take the relative width of the parent.
And your text in h1 will center itself.
Working Fiddle
I want to center(horizontaly) three icons(inline) inside a div by using css. My div is centered inside another div but I want to center the content(the three icons) inside that div.
<div id="browsers">
<div id="browsers-wrapper">
<img src="Images/firefox.png" class="browserIcons">
<img src="Images/chrome.png" class="browserIcons">
<img src="Images/opera.png" class="browserIcons">
</div>
</div>
Also a useful article on centering content with css to understand more about the procedure?
Thank you!
I actually managed to do it myself! I still need to understand the basic around block and inline elements..
Thank you though.
#browsers-wrapper img{
display:inline;
margin:auto;
width: 8%;
height:auto;
}
try this commands , it may works :
#beowser-wrapper img {
margin : auto 0;
display : block;
width : 100%;
}
I recommend to take a look in this tutorial which describing these elements
Learn CSS Layout
And in here You can also look into Inline and block elements that described by picture examples :
What’s the Deal With Display: Inline-Block?
I hope it'l help you enough.
jsfiddle
I have:
HTML:
<div>
<img src='http://upload.wikimedia.org/wikipedia/commons/7/70/Peace_dove_icon.svg' width='50' height='50'>
</div>
CSS:
div{
display:inline-block;
position: relative;
margin: 0;
border: 0;
padding: 0;
overflow: visible;
}
but if you inspect the page you should hopefully see a seemingly arbitrary 5px extra on the bottom of the div tag.
how can I get rid of this?
It's the descender of the img. Images behave like words and sit on the baseline in the container, which leaves space below them for descenders.
Solution: give the img display:block or use properties like vertical-align, position or float, whichever suits the situation best.
I updated the fiddle - new one here - but I must say, there is no visible difference in this case. There is nothing on the screen except the image.
You can use the vertical-align as by default, images are rendered inline, like a letter.
or set the style="display: block;"
Just give the div this css rule:
height: 50px;
Here is a working fiddle:
http://jsfiddle.net/Hive7/9JU3T/1/
line-height:0; for the div solves the problem, too!
I am studying on a tutorial how to create a tabless web template using HTML + CSS and I have a little doubt related to the following thing:
I have an header that contains a div having id=logo, something like this:
<div id="header"> <!-- HEADER -->
<div id="logo"> <!-- My Logo -->
<h1>My web site is cool</h1>
<p id="slogan">
My web site is finally online
</p>
</div>
......
OTHER HEADER STUFF
......
</div> <!-- Close header -->
And related to this #header div (and its content) I have the following CSS code:
/* For the image replacement of the logo */
h1 {
background: url(../images/logo.jpg) no-repeat;
text-indent: -9999px;
width: 224px;
height: 71px;
}
h1 a {
display: block;
width: 258px;
height: 64px;
text-decoration: none;
}
So this code put an image instead of the My web site is cool text that is in the tag.
I have some problem to understand the h1 a CSS settings, on the tutorial say that this CSS settings for h1 a:
Turns to block (from inline) the display mode of the link in the header, so I can set the width and height, and the image of the logo is now clickable
This thing is not very clear for me and I have the following doubts:
Have I to convert the a element (that is inline) into a block element to give it the same dimension of the underlying image (logo.jpg)?
Tnx
Andrea
Take this example,
an a element is inline by default, so if you were to do something like
CSS
a {background:red; height:210px; width:200px;}
HTML
test
You will notice that the width and height properties aren't working. Now for this element to be sized at that width, you need to set the element's display property to be either display:block or display:inline-block
JSFiddle Demo Example
HTML:
Without display:inline block, width and height set.
<br><br>
With display:inline block, width and height set.
<br><br>
With display:block, width and height set.
CSS:
a {background:#ccc; height:210px; width:200px;}
.inline-block { display:inline-block; }
.block { display:block; }
If you're linking an image, you don't need to give the a height/width or even a display:block. However, you really shouldn't be putting an image inside an h1 like that. You'd be better off making the a inside the h1 a block (using display:block) and setting the background to the image, then hiding the text. To the user of the site, there's not going to be much difference, but it removes images from your HTML code, makes it easier for screen readers, and is more semantically correct. So your code would be:
a { display: block; font-size:0; background-image:url("logo.png"); height:100; width:100 }
How to put text over images in HTML. Everytime I enter the below code, the text goes under the image.
<img src="example.jpg">Text</img>
You can create a div with the exact same size as the image.
<div class="imageContainer">Some Text</div>
use the css background-image property to show the image
.imageContainer {
width:200px;
height:200px;
background-image: url(locationoftheimage);
}
more here
note: this slichtly tampers the semantics of your document. If needed use javascript to inject the div in the place of a real image.
You need to use absolutely-positioned CSS over a relatively-positioned img tag. The article Text Blocks Over Image gives a step-by-step example for placing text over an image.
The <img> element is empty — it doesn't have an end tag.
If the image is a background image, use CSS. If it is a content image, then set position: relative on a container, then absolutely position the image and/or text within it.
You can try this...
<div class="image">
<img src="" alt="" />
<h2>Text you want to display over the image</h2>
</div>
CSS
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
Using absolute as position is not responsive + mobile friendly. I would suggest using a div with a background-image and then placing text in the div will place text over the image. Depending on your html, you might need to use height with vh value