Div in div positioning

Question

I have a div inside of a div and I want to position the div in the centre.

<div class=\"dialogs-icon\"><img src=\"images/space.png\" width=\"25\" height=\"25\" class=\"d-icon\"><div class=\"messages\">hi</div></div>

<style>
.dialogs-icon {
    display: inline;
    position: relative;
}

.d-icon {
    width: 25px;
    height: 25px;
    margin: 5px 15px 5px 5px;
}

.messages {
    width: 250px;
    position: absolute;
    top: 50px;
}
</style>

How do I make .messages centred to .dialogs-icon?

I want to make horizontally center positioning

you should make us a fiddle or codepen with your HTML and css you tried. (use and link fake image at dummyimage.com or lorempixel.com if needed) — G-Cyrillus, Jun 30 '14 at 16:31
@user3780736 Can you please show an example of what the expected output is? — rink.attendant.6, Jun 30 '14 at 16:35
It will be good if you provide fiddle ... you can do this right here http://jsfiddle.net — Shashank, Jun 30 '14 at 16:37
okay, made a fiddle for you : http://jsfiddle.net/GCyrillus/8pT3k/ and vertical-aligned your div to image , just in case this is what you meant by center. — G-Cyrillus, Jun 30 '14 at 16:37
@GCyrillus thank you very much for your fiddle, but i need horizontal positioning — user3780736, Jun 30 '14 at 16:40
@user3780736 oki, so in this case with absolute, the absolute element has to be the container within wich content can get margin and width value to react as in the flow: ex: http://jsfiddle.net/GCyrillus/8pT3k/2/ — G-Cyrillus, Jun 30 '14 at 16:48
@GCyrillus I solved this by adding `left: -107px`. And how I can add an arrow like this? http://i57.tinypic.com/33dw12e.jpg — user3780736, Jun 30 '14 at 16:55

score 0 · Answer 1 · answered Jun 30 '14 at 16:30

Use margin: auto in the div you want to center.

<style>
.dialogs-icon {
    display: inline;
    position: relative;
}

.d-icon {
    width: 25px;
    height: 25px;
    margin: 5px 15px 5px 5px;
}

.messages {
    width: 250px;
    margin: auto;
    top: 50px;
}
</style>

score 0 · Answer 2 · answered Jun 30 '14 at 16:39

0

Try this

.messages{
    width:250px
    margin:0px auto; //This will center your content but it needs width to be defined
}

There is another way to do it by using center tag. Note that center tag is removed from htm5 but it still works in the browsers hi

answered Jun 30 '14 at 16:39

Skyyy

1,539
2
23
60

its not working with absolute position but working with relative position property. And you can see center tag is working too http://jsfiddle.net/4ntV4/1/ there will be some way to make it work with absolute position you need to play with display property – Skyyy Jun 30 '14 at 16:53

score 0 · Answer 3 · answered Jun 30 '14 at 16:46

To horizontally center and have absolute positionning mixed together, you could use the .messages box as a container sprayed ont the whole width of the page, and center its content:

DEMO

HTML

<div class="messages">
        <p>hi</p>
</div>

CSS

.dialogs-icon {
}
.d-icon {
    width: 25px;
    height: 25px;
    margin: 5px 15px 5px 5px;
}
.messages {
    width:100%;
    position:absolute;
   left:0;
}
.messages p {
    width:50%; /* or whatever */
    border:solid;
    background:white;
    margin:auto;
}

I need position `.messages` to `.d-icon` – user3780736 Jun 30 '14 at 16:48 — user3780736, Jun 30 '14 at 16:48

Div in div positioning

3 Answers3