How would I go about vertically centering the name "Tony Robbins" for this drop down menu? I've tried adding vertical-align:middle to both the span containing the text and to the li#drop-avatar which contains the text. Can someone let me know what I'm doing wrong?
P.S. is there also a way to get text-align: center also working so "Tony Robbins" is also centered horizontally?
http://jsfiddle.net/vJaaR/
add:
img
{
vertical-align: middle;
}
Because your text is inline with the image, you need to tell the image how to align with the text.
span is an inline element, so it will only take up the amount of space that it needs. Consider making this span a block element using display: block and it will take up the full width. Then you can apply text-align: center to it.
You may have to float the image to the left in this case, though.
Update: I added the styles to the fiddle:
http://jsfiddle.net/Dismissile/vJaaR/1/
Does this do what you want?
These are the styles I added:
a.small-width > span {
display: block;
text-align: center;
}
a.small-width > img {
float: left;
}
You might want to create new classes because I have no idea what else you use small-width for.
Related
I was trying to create a registration form and I encountered a problem.jsfiddlehere
Output is as shown in image below
As shown in the image I want the address to be at the top of the line as indicated without using style position relative or absolute. Is it possible to fix that with margin or padding. And the other thing is why the address text is appearing in the bottom, doesnt it be at the top by default? Is it because of textarea?
Thanks in advance
To align verticaly 2 inline-block elements, you can use vertical-align.
In your case:
.container span {
padding-left: 40px;
display: inline-block;
width: 30%;
/* Add vertical alignment */
vertical-align: top;
}
Here is a fiddle.
Add this to your CSS...
#address span{
vertical-align:top;
}
Write the html like this
<span> Address <textarea cols="5" rows="10"></textarea></span>
Add this to your css
span textarea {vertical-align:top;}
This code should keep the label at the top, you will then need to align your texarea to the other text fields
I've been reading various posts on stackoverflow and a few other sites about centering images. I found this code on various sites that seems to be a general guide:
img {
display: block;
margin-left: auto;
margin-right: auto;
}
I am trying to center an image. I can't center it with this code. I can make it move using text-align: center but read this isn't the best method of doing so. I made a jsfiddle. If anyone wouldn't mind helping me it would be appreciated. I was able to make the image move as well by adding a random width value. I don't think this is the right approach though either since I am eyeballing if it is centered or not.
Sorry, I couldn't get the actual image to display but the img logo is there as a placeholder: jsFiddle
Your code should work just fine. There's probably something more you're not showing us. Here's a demo of two methods, though.
Basically, if the img is display: block; you can use margin: 0 auto.
If it's display: inline (the default for an img tag) the parent element would need text-align: center; on it.
Here's some code to summarize: http://jsbin.com/upuzav/1/edit
I would assign your image a class rather that trying to center all images with html. This way if you want to change where its positioned, you can quickly, rather that adjusting all things with the img tag.
CSS:
.center_image {
display: block;
margin-left: auto;
margin-right: auto }
Your Image:
<img src="your_image.jpg" class="center_image">
In order for this trick to work the image must have an explicit width. See http://designshack.net/articles/css/how-to-center-anything-with-css/
I was creating a unordered list and in that list I wanted to add a color pallete type window and I tried to create one the following way
<ul><li><div style="width:10px; height:10px; background-color:#0066cc; float:left;"></div>test</li></ul>
http://jsfiddle.net/wNkmJ/
I am attaching a fiddle link to see the output.. Is there a good way to align the div to text or should I just adjust the margin of div element, but I dont think that is the best possible solution..
On your div, set:
text-align: center;
display: inline-block;
float: none;
This positions the div in much the same way that images are positioned.
In general, having line-height for li will be a good choice.
From your JSfiddle,
li{
line-height: 10px;
}
check out this JSFiddle.
I am trying to get text wrap around the image in the page below. Although the image is floated to the left the text doesn't seem to wrap around.
http://goo.gl/SskvJ
I would appreciate any help
Your .region class has a float:left rule that should be removed. Then you'd also need to remove the clear:both rule on the h2 element. Then you'd want to add a float:left rule to the image on the page.
I think I found a solution. It worked fine with me.
What I've made was creating a div called content and I placed inside an img and also another div that contains text.
Have a look at here http://jsfiddle.net/Apfyv/
Hope it helps!
You have both image and text in a div and the are both floated left ... this is fine - but the div elements dont have a width specified - so they are taking up 100% (block element) - if you assign the divs a width it display to the right of the image
Seems like the text is not wrapping around the image because the text and the graphic are both in two separate DIV tags, you should merge them.
Add a style
.region > img {
float: left;
}
And add display: inline-block to #page_product #overview h2
#page_product #overview h2 {
margin: 0 0 1.5em;
font-style: italic;
font-weight: bold;
font-size: 1.2em;
line-height: 1.429;
display: inline-block;
}
Is it possible to align everything to center in this example by using CSS? If not then what should I do?
As you can see the images are not the same height so it makes things even more complicated. What I want is align all images and text so they look like a line.
Here is fiddle: http://jsfiddle.net/cRGeD/
Simple answer use span instead of li
http://jsfiddle.net/cRGeD/22/
This could help you, I have added DIV for text and floated it to left,
then adjusted line-height 250% of li, check fiddle
http://jsfiddle.net/chanduzalte/cRGeD/8/
Edit: here I've applied the principle below to the first two items in your jsFiddle: http://jsfiddle.net/cRGeD/23/.
HTML
<span class="icon question-icon">1234</span>
CSS
.icon{
padding-left: 20px;
background-position: left center;
background-repeat: no-repeat;
display: inline-block;
}
.question-icon{
background-image: url("../path/for/images.jpg");
}
This way you can use a different class for a different icon, and only need to add the image path to the new class.