I know this has been addressed previously, but for the life of me I can't get it to work with my code (yes, I'm new to this so please be gentle, and do let me know if I am going against SO etiquette!).
Basically, trying to setup a navbar with links centered vertically that become highlighted when hovered over.
I got it setup by eyeballing it and adjusting the margins / padding, but surely there is a better way to to go about this.
Also, how do I go about centering the links horizontally as well?
Here's the relevant code.
http://jsbin.com/wekuqidu/1/
Thanks all!!!!
Here is an example using line-height, you can also try using table-cell to vertically align in the middle
http://jsbin.com/nagoposu/2/
Related
Sorry if this has been asked before. I'm very inexperienced with CSS. I tried looking through previous threads to see if I could solve this problem myself, but I've had no luck so far.
The website is http://greenemusiceducation.com/
The container right underneath the site's header is forcing all content (in this case a slider) to align to the right. In the 'site-inner' and 'wrap' classes (the classes that are listed right underneath the header in the sites source-code), I've tried editing the parameters but the changes don't seem to have any effect whatsoever. This container alignment issue is consistent across different pages for the site.
On mobile devices, the site loads fine and operates as expected. On Chrome, everything is right-aligned. On IE 11, the slider doesn't show up at all.
I would be grateful for any help!
.content has float: right;. If you want to center it, remove the float, and use margin-left: auto; margin-right: auto; to center it horizontally. Since the element has a defined width, that will center it horizontally. Here's a good resource on how to center things - https://www.w3.org/Style/Examples/007/center.en.html
You can nest the style that is sliding to the right within a paragraph html heading with an inline style that sets the text for that to center. Even though there are other things beside text, it will still center the content of the container nested within it.
<p style="text-align:center;"><div="container></div></p>
I built a bottom header with a toggle for a menu on the bottom. The toggle portion is not aligning with the <span> right next to it. It's almost exactly one line-height below for some reason.
Code - https://jsfiddle.net/odvd05d8/
I tried using margin but it moves the side divs as well. I also tried to clear whitespace as most of the elements are inline, but that didn't work either.
Any suggestions would be really helpful. Thank you sincerely.
you can use as in css as may it's help you
.dropdown{
top:-20px;
}
I have a DIV that I have put images that show up on hover. This is no problem, but getting them aligned vertically and horizontally is the real problem. I have messed with it for a few hours and it just won’t cooperate with me. I have tried all sorts of CSS but to no avail. Can someone please help me?
Here the current project: JS Fiddle
I tried the padding:auto and vertical-align:middle but neither worked.
I am trying to getthe image that appear on over to be vertically and horizontally aligned with the inner DIV. Any suggestions are welcome.
here is new updated jsfiddle see this. i changed in your css
http://jsfiddle.net/jkkheni/Zf5am/1091/
JSFiddle
I'm creating an image gallery that, ideally, should have a column of thumbnails on the left with a larger image on the right with both sections aligned along the top vertical axis.
To do this, I've floated the thumbnails and larger image left and right, respectively, and tried every combination of clear:both and overflow:hidden I could think of to achieve the top alignment to no avail. Any ideas?
I've included a JSFiddle at the top and an image below to give an idea of what I'm going for.
Put div.large-image before div.thumbnail in your HTML.
I'm not exactly sure why this happens. This article briefly discusses it. The answer/reason is probably buried somewhere in the CSS float spec.
I wrote a cool simple JSFiddle to show how the gallery should be displayed, and how you can align the images.
You have to be careful with using this JSFiddle in your code because some of the elements you used in your question's JSFiddle have pre-specified properties like display:inline-block or other things that might need to be overridden in CSS for the gallery elements. This is also for browser-compatibility.
Go to my blog and please tell me how to achieve vertical alignment :( My situation truly is different and I need help :)
The reason this is so difficult is because holder is the div that contains everything, outer are the icons at the bottom, and tooltip are the divs that pop up. I need tooltip to be vertically aligned but they are actually below outer. Each icon is connected to their post so you can't keep them all in one div.
how about:
#holder{
bottom:50%;
}