#searchInput {
width: 50%;
height: 40px;
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
top: -12em !important;
left: 1em !important;
}
I can't get this div to stay centered in my mediawiki wiki. Is there a way to do this? The code above doesn't do anything. It just stays in place. I have applied what I know in previous post, and it still doesn't work for certain divs.
Related
I've got a portfolio-like page, displaying images in a grid with a title on top of it. The title is set to inline-block and has a background color, width depends on the length on the title.
Whenever a title becomes too long to fit within the parent article it wraps to a second row; no problem.
But why does the auto width result in 100% now?
.content{
background: pink;
width: 33%;
float: left;
height: 200px;
overflow: hidden;
position: relative;
}
.title{
position: absolute;
bottom: 10%;
left: 0;
text-align: center;
}
h2{
display: inline-block;
font-family: Arial;
background: rgba(255,255,255,0.6);
}
Example:
https://jsfiddle.net/6qtw7duf/
Ok..let's explain this in simple term
Maybe someone can help me out. I am working on a mock web page in WordPress and I am running into a small issue. Two of the divs are centered on my 17in PC screen but when I look at them on a desktop, they are the only two divs that are not centered on the screen and are not responding when I shrink a window down. The two divs / classes that I am working with are .headerwrap and .ibanner.
Here is the code for just the .headerwrap:
.headerwrap {
display: block;
min-height: 88px;
background-color: #FFF;
width: 1200px;
position: relative;
margin-left: 185px;
vertical-align: middle; }
and the .ibanner is:
.ibanner {
display: block;
width: 100%;
background-color: #95C837;
text-align: center;
position: relative;
overflow: hidden;
margin-top: 20px; width: 1200px;
margin-left: 185px;
box-shadow: 10px 10px 5px grey;
vertical-align: middle; }
The website is: http://bitlamp.wctc.edu/~ktepp/StellarBlueTechnologiesTest/
Can anyone tell me what I am doing wrong and how to fix this?
Thank you in advance!
I am using carousel for image display but I would like to cater it for all types of image dimension a user upload. I resized all images before displaying it in a carousel but i cant seem to make in into center. I have tried margin:auto / text-align:center either in the li tag or img tag but it doesn't seem to work for me. Below are some samples of the carousel showing empty spaces and the image should be displayed in the center.
Image restrained by width
Image restrained by height
What i wanted to achieve here is to make the images to display in the center either it is restrained by width or height. This is how my images are rendered
<div class="fanpageCarousel" ng-controller="FanCarouselCtrl"
ng-init="getImage()">
<ul rn-carousel rn-carousel-indicator rn-carousel-auto-slide="3"
rn-carousel-pause-on-hover="true">
<li ng-repeat="image in slides"><img ng-src="{{image.src}}" /></li>
</ul>
And these are my CSS customization
.fanpageCarousel{
position: relative;
margin: auto;
padding: 15px;
background-color: #ffffff;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
max-width: 800px;
max-height: 450px;
border-radius: 4px;
}
.fanpageCarousel img{
max-width: 100%;
max-height: 400px;
}
here is the JSFiddle link
Hope someone can give me some assistance.. Thank You
Make the following changes to CSS:
.fanpageCarousel img {
bottom: 0;
left: 0;
margin: auto;
max-height: 100%;
max-width: 100%;
position: absolute;
right: 0;
top: 0;
}
.fanpageCarousel li {
height: 450px;
overflow: hidden;
position: relative;
text-align: center;
}
In short the container (li) around each img needs to be set to position: relative; to allow the img to be positioned relative to it. Height needs to be specifically set on the li for this to work. text-align: center; is a fallback for older browsers to at least center the img horizontally. Setting position: absolute;, margin: auto; and bottom, left, right and top to 0 is what makes the img center in the li.
JS Fiddle:
http://jsfiddle.net/h82ajq0c/
Given a div with known dimensions, say width: 300px; height: 200px, what is the easiest method to place it in the middle of the screen both vertically and horizontally ? Example here
I'm interested in latest Firefox (no need for IE hacks).
CSS only please, no Javascript.
Position it 50% from the window/parent container and use a negative margin size that's half of the elements width/height :)
position: absolute; // or fixed if you don't want it scrolling with the page.
width: 300px;
height: 200px;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -100px;
You might need to set height: 100%, on both the body and html
html, body {
height: 100%;
}
Edit: Here's a working example .
Without supporting IE, this is actually pretty easy to achieve using display: table and display: table-cell.
Here's an update to your HTML:
<div id='my_div'>
<div class="centered">this is vertically centered</div>
</div>
CSS:
body, html
{
height: 100%;
}
body
{
margin: 0;
padding: 0;
border: 1px solid blue;
}
#my_div
{
width: 300px;
border: 1px solid red;
margin-left: auto;
margin-right: auto;
height: 100%;
display: table;
overflow: hidden;
}
.centered
{
display: table-cell;
vertical-align: middle;
text-align: center;
}
And to preview: http://jsfiddle.net/we8BE/
I don't know if this is the simplest way, but it seems to work.
http://www.infinitywebdesign.com/research/cssverticalcentereddiv.htm
What methods are you open to using? For example CSS up to what level - 2 or 3? Javascript? jQuery? My first thought is that, since divs can be centred horizontally through margin-left: auto; and margin-right: auto;, maybe try margin: auto; for all 4 sides. Let me know if it works.
The easiest? One of the numerous jQuery center plugins available...
I have an issue where I want to display a header in the top left of a DIV. If I set the parent to relative and the inner div to absolute I can then position it so the backgroundimage goes top right so it looks like this:
http://www.landingapollo.com/random/stackover1.png
That works correctly. However, in another instance it is not working correctly because the parent container has its overflow set to hidden. It thus displays like this:
http://www.landingapollo.com/random/stackover2.png
Relevant code:
This is the main container
.container {
overflow: hidden;
position: relative;
float: right;
width: 650px;
margin-left: 5px;
margin-right: 7px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
This is the title background
#pinnedthree_title {
position: absolute;
width: 200px;
height: 30px;
background: url('images/headers/latestnewsheader.png') no-repeat left;
z-index: 100000;
top: -20px;
}
If you give the parent container the correct height it will show your content even though you are using overflow: hidden;
An absolute element will not push a relative element to the correct size.
Basically if your relative container was holding only your absolute container then it would have a height of 0 because it doesn't contain anything that will increase its height.
Because of this when you use overflow: hidden; it will hide anything that goes past the height of the relative container (In my example 0)
So try giving your relative container the correct height and see if that works.
I think You will need another div to achieve the effect that you want.
<div class="floater">
<div class="container">...</div>
<div id="pinnedthree_title">...</div>
</div>
.floater {
overflow: visible
position: relative;
float: right;
width: 650px;
margin-left: 5px;
margin-right: 7px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.container {
overflow: hidden;
position: absolute
width: 650px;
}
#pinnedthree_title {
position: absolute;
width: 200px;
height: 30px;
background: url('images/headers/latestnewsheader.png') no-repeat left;
z-index: 100000;
top: -20px;
}