I have a div that I want to center horizontally inside my browser window without changing the vertical position. Here's my div:
<div id="divErrorMessage" class="ErrorClientSide">
<div class="ui-icon ui-icon-info" style="float: left; margin-right: 6px;"></div>
<div id="divErrorMessageText" style="margin-left: 6px;margin-top: 2px;">{ERROR MESSAGE HERE}</div>
<img src="./Images/Icons/tinyx.png" style="position: absolute; top: 4px; right:4px; cursor:pointer" onclick="closeErrorMessage();" />
</div>
And here's the class:
.ErrorClientSide {
display: none;
position: fixed;
top: 4px;
left: 370px;
padding: 10px 25px 10px 25px;
border-radius: 7px;
}
Note: I removed the color styles and such from the class above for brevity.
Try it out here. Instructions: Leave all boxes blank and just click the Next >> button. You should see a pink error message div appear at the top that says "Error: All fields are required.", but the horizontal positioning is way off.
Problem: I cannot center divErrorMessage horizontally in my browser window. I'm pretty sure that position:fixed is the problem, but if I remove that, my div disappears and I can't find it. left:370px is clearly a problem as well. If I remove that, the div aligns at the left of the browser and I can't find any way to center it.
Here are my only positioning requirements for this div:
If CSS can't do this easily I would be happy for a jquery solution as well, but I'm guessing this should be easy with CSS.
Important note: The error message div and much of the content is inside an iFrame.
If the absolutely positioned error box doesn't have a fixed width, you could achieve the horizontal alignment by a combination of left: 50%; and transform: translateX(-50%);.
For instance:
.ErrorClientSide {
position: fixed;
top: 4px;
left: 50%;
transform: translateX(-50%);
}
Vendor prefixes omitted due to brevity.
It's worth noting that translate transform is supported in IE9+. For further reading you could refer to the topic below:
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加