I have this problem where Im trying to center a div with several spans of alternating texts of various lengths.
I have tried everything I could find, but the problem persists. Please, can anyone look into my css for what Im doing wrong?
Heres the link to the website: www.ultimatexp.com, I need to center align the changing header: We are exclusive, We are exciting, We are effective, We are entertainer asia.
Thank you!
Use width :100%;display:block in your span styles. or either try setting the parent div's text-align property containing the spans as text-align:center
Instead of display:block us display:inline-block for span, then add text-align:center
Related
since days I try to position 4 div tags (accommodation site widgets) within a div tag so that they are showing in one horizontal line side by side. I used the CSS elements "float" and "display" to do this but of whatever reason only 2 of the 4 divs position the way I want to. You can see the result here http://www.somersetsights.co.za/preiseneu.html. The css style elements are either inline style in the html document or in the style sheet http://www.somersetsights.co.za/css/style.css.
I am not a expert. Actually rather inexperienced. I tried hard to solve this by myself but I struggle. I hope a expert can advice me. Thanks
May this help you. add this CSS to your outer div
#review_widgets {
display: table-cell;
width: 1%;}
This will make your div horizontal
There are many ways to solve this. For example you can set the width to 100% to the .services div that it's actually the parent tag of that content you want inline. Personally I would use display: inline-blockto position the elements instead of floats but it depends on you.
Also I would assign box-sizing: border-box to the .services tag for avoid the overflow of that div due to its padding.
Hope it helps.
I'm building a website with fluid layout and I want avoid things like setting dimensions. I'm having success in almost everything, but I have a div that doesn't work as expected. See this link: http://cssdesk.com/Bshqe.
I expect that "div_botao_comecar_convite_cadastro_b" were placed to the right of "div_descricao_curta_convite_cadastro_b", but it was placed below this div. I want that the div be placed at left.
As I say, I don't want set a width for anyone div. Sorry for bad english. Thanks in advance.
If you don't want to set a specific width but want the children elements aligned horizontally, use css3 flexboxes -
apply display:flex to #div_elementos_convite_cadastro_b and adjust the other css accordingly....
demo
more about flexboxes # CSSTricks
I have created some "buttons" out of three divs and I have set a hover to each div so that the text drops by 5px when the user hovers over the div.
I'm using display:inline-block as I don't want to use float:left
The only problem is that when I use display:inline-block on the divs, it lowers the other divs instead.
Here is how it should work (using float:left)
WORKING
And this is what happens when I used display:inline-block
NOT WORKING
Is there a fix for this or am I going to have to use a different solution?
Sorted the problem!
Although KingKing's answer was correct, using .wkd > * {vertical-align:middle;} didn't seem to work well with the rest of my code so I had to alter it slightly so it worked like so:
.won, .keep, .discard {
vertical-align:middle;
}
Still, KingKing's answer helped me figure this out so thank you :)
Can someone please tell me why vertical-align:middle Not working like text-align:center ?
I mean, why is it so hard to make it work?
I want to know why those W3 ppl don't make a text-align:middle
I'm asking why it's so hard to make the vertical-align:middle like text-align:center.
The vertical-align attribute is for inline elements only. It will have no effect on block level elements, like a div or a paragraph.If you would like to vertically align an inline element to the middle just use this.
Refer this Link : http://phrogz.net/CSS/vertical-align/index.html
text-align:center
means put the text in the center of the width of the <p> tag for example
vertical-align:middle
means. Put the <p> in the center (middle) of the height of the the parent tag <div> for example. Which means you need to increase the height of the parent.
Vertical align aligns like by height like this:
___________________________
Some text aligned top
Some text aligned middle
Some text aligned bottom
__________________________
Help with horizontal align can be found here: http://www.w3schools.com/css/css_align.asp
I am trying to vertically center an anchor within a fieldset using CSS but it always appears to align to bottom. Is there any tricks to this?
You are not giving too much detail here. Besides the line-height you might also want to tweak top and bottom padding. It all depends on how much stuff you have inside the fieldset.
Have you tried specifying a line-height for the text? It should help to align in both Firefox and IE.
Try setting the style vertical-align:middle;
google
If that doesn't work posting your HTML would be helpful