I'm designing a website using Dreamweaver and I'm having some problems with aligning the menu bar. I'm using an image designed in Photoshop and then exported over to dreamweaver. The image is to go in the center of the banner as it contains the links to the other pages of the website. I'm having difficulty center aligning this. It needs to be center aligned by the middle of the image, not by the left edge of the image. I have been using this code in CSS to do so:
position: fixed; (The menu bar needs to always be at the top, even when scrolling)
top: 0px;
left: 50%;
margin-right: -50%
transform: translate(-50%, 0%);
This has been working for Google Chrome, but on Safari it doesn't work. The image still aligns by the left margin of the picture.
Any help would be greatly appreciated.
I have also tried using margin-left: 50%; instead of transform and that doesn't seem to work.
Have you tried with the prefix?
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
Related
My code should do the following:
A background big semi-black bar that is rotated 5 degrees.
JSFiddle
<div class="con-fluid"><div class="_978y"></div></div>
.con-fluid{
width: 100%;
}
._978y{
background-color: #2d2d2d;
width: 200%;
height: 296px;
position: absolute;
-webkit-transform: rotate(5.13deg);
-moz-transform: rotate(5.13deg);
-ms-transform: rotate(5.13deg);
-o-transform: rotate(5.13deg);
transform: rotate(5.13deg);
}
/*as you can see, the rotation code is universal to make sure it works on almost all browsers/
The issue: it's not filling on both its ends. You can see it clearly in the code preview.
what I want is basically filling this empty area so it doesn't look off the chart. Any thoughts?
Thanks in advance.
I don't quite understand your query, however, I think you are asking about the missing "triangle" on the top right of the rectangle. It is there because you rotated the rectangle.
To hide it, put margin-top: -10px; within the css for ._978y, moving the rectangle up 10px.
I created a featured block with HTML5 and CSS3. This block includes a background-image and some text heading. You can see it live here: http://codepen.io/anon/pen/yNWxBb
As you can see I am now using margin-top to center the text in the vertical middle of the block. And make use of the pseudo-class ::after to add a transparant dark overlay above the background-image.
I know you can vertical align a div using table in combination with table-cell and vertical-align: middle, but than it messed my markup.
Does anyone know how to fix this? And is this the right markup to do this? Or should you recommend an other markup and manner to add the transparant background to the image?
Look out to you answer/advice.
Thank you in advance.
Two possible solutions to your problem:
http://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/
http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
And yes, you might want to alter the markup in order to make this possible but both articles I'm pointing you to come with example code.
I do believe this is your solution. Just replace this class in your css and it will work fine I guess.
.features figcaption header {
position: absolute;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
margin-left: auto;
margin-right: auto;
font-size: 24px;
line-height: 34px;
color: #FFF;
//position: absolute;
//top: 28%;
}
I'm using the following code to vertical center some elements:
.vertical--center{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Also, the parent of this element is always position: relative. This works on every browser I tested except Safari. Is there any workaround or webkit to make this work? If not, which way would be better to vertically center things on Safari ?
Using -webkit-transform: translateY(-50%); did the trick =D
This question is coming back often but even looking at some solutions, I can't get mine ...
http://jsfiddle.net/6v6cc7y5/2/
I make a slideshow (wordpress) showing en image in a div.
I want the image to be 400px large,
and vertically centered even if it is higher, I want it 200px max-height.
I call the image from a PHP while for 5 last articles and it makes impossible to use a css background-image.
Here are some solutions I found but couldn't use : (add http://)
http://jsfiddle.net/willthemoor/Cu3G5/
http:// codepen.io/anon/pen/dHvLc (<- remove added space)
Thanks a lot if you can help me !!!
stackoverflow wants some code to post ... here is a part of CSS
.jDiaporama li img{
position:absolute;
display:block;
top: 50%;
-ms-transform: translate(0%, -50%);
-webkit-transform: translate(0%, -50%);
transform: translate(0%, -50%);
}
I have been using back button in jquery mobile page what i need is to vertically align the back button. in the header
Thanks in advance
You can check this web site for the answer (as well as detailed explanation of the problem with vertical alignment): http://phrogz.net/css/vertical-align/index.html
Modify the top value using the following css rule.
.ui-header .ui-btn-left {
top: 0.6em;/*Adjust this value*/
}
There's another stackoverflow post that seems related to your question. It includes a workable solution (elegant and not too hackish). Nevertheless, I hope the jQuery Mobile folks (bless their hearts) make a standard way to specify vertical alignment in any table or grid.
Stackoverflow Post 8280637
I know, its old task but... I have to classes to make this.
One for just vertically center something, one for vertically and horizontally:
.h-centered-item {
position: absolute;
top: 50%;
transform: translate(0, -50%)
}
.vh-centered-item {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
Just apply it to the element you want to center vertically or both