CODEWITHSUNDEEP
css
jimbeeer
jimbeeer

Reputation: 1695

css position absolute off center to the left

I'm trying to position a div box off center and to the left. It must be absolute positioning and I can't wrap it within another div as it's generated by a very long js script.

Here's my css so far:

.nivo-html-caption {
  position:absolute;
  top:59px;
  opacity:0.8;
  transition:all 0.8s ease-out;
  background-color: rgba(0,0,0,0.24);
  width: 350px;
  color: #cbcbcb;
  padding: 10px;
  margin:auto;
}

I'm using the margin:auto; to center it and the top:59px; to push it down from the top. But I now need to push it off center to the left about 300px.

I'm not quite sure how to do this without wrapping it in another div or putting another div inside it (which I really don't want to start doing as it's going to take a lot of messing around)

Upvotes: 5

Views: 6331

Answers (5)

Ray Blanchard
Ray Blanchard

Reputation: 21

margin: 0 auto will not get you the right results if position is set to absolute, so try:

left: 50%;

Upvotes: 2

Paulie_D
Paulie_D

Reputation: 115288

Your request is a little unclear but you first need to center the item and then move it over 50% of the required adjustment.

.nivo-html-caption {
    position:absolute;
    top:59px;
    left:50%; 
    transform:translateX(-50%); /* centered first regardless of width*/
    margin-left: -175px; /* then moved over */


.parent {
    position: relative;
    height: 500px;
    border:1px solid green;
}
.nivo-html-caption {
    position:absolute;
    top:59px;
    left:50%;
    transform:translateX(-50%);
    margin-left: -175px;
    opacity:0.8;
    transition:all 0.8s ease-out;
    background-color: rgba(0, 0, 0, 0.24);
    width: 350px;
    color: #cbcbcb;
    padding: 10px;
}
.center {
    position: absolute;
    top:0%;
    left:50%;
    height: 100%;
    width: 1px;
    background: red;
}
<div class="parent">
    <div class="nivo-html-caption"></div>
    <div class="center"></div>
</div>

Upvotes: 6

G.L.P
G.L.P

Reputation: 7217

try like this : Demo

h1 {
    position:absolute;
    top:59px;
    opacity:0.8;
    transition:all 0.8s ease-out;
    background-color: rgba(0, 0, 0, 0.24);
    width: 350px;
    color: #cbcbcb;
    padding: 10px;
    margin:auto;
    left: 50%;
    margin-left: -25%;
}

HTML:

<h1> Text half center </h1>

I tried to align it in center using left and shifted half using margin-left

Upvotes: 0

Strikers
Strikers

Reputation: 4776

position: absolute;
margin: auto;
top: 0px;

this will make the div stick to the left side. and vertically center

example fiddle here

Upvotes: 0

Pat Dobson
Pat Dobson

Reputation: 3299

As it's positioned absolute, instead of centering it using margin: auto, try this:

left: 50%;
margin-left: -175px;

This will centre it and adjusting the margin-left will take it off centre.

Upvotes: 3

Related Questions