How am I supposed to move this text inside this div to bottom center?

Asked Jun 19 '18 at 15:47

Active Jun 19 '18 at 20:45

Viewed 48 times

CSS:

body {
    background-color: #bad455;
}

.basic {
    background-color: blue;
    color: white;
    line-height: 30px;

    top: 0px;
    left: 0px;
    height: 50%;
    width: 150px;
    position: absolute;
    border: 8px solid red;
}

.container {
}

.basic > p {
    top: 50%;
    position: relative;
}

HTML:

<body>
    <div class="container">
        <div class="basic">
            <p>This text should move</p>
        </div>
    </div>
    <!-- Further code... -->
</body>

Sorry but a stupid question. I'm not sure why this text doesn't go down 50% inside this div? I've been trying to use vertical-align, padding-top, text-center to 50%, but they didn't work that well and it always goes more than 50%. So is there any way to push this text inside to the center? Maybe its a position problem or something? I've been trying to solve this for quite a while but can't figure it out. Thanks in advance.

edited Jun 19 '18 at 20:45

Ed The ''Pro''

asked Jun 19 '18 at 15:47

Edgaras

Is this what you're looking for: [How to Center Elements Vertically and Horizontally in Flexbox](https://stackoverflow.com/a/33049198/1115360)? – Andrew Morton Jun 19 '18 at 15:50
If you want to center the text inside the DIV. Use flex :) – billy.farroll Jun 19 '18 at 15:51
So many duplicates, please try doing a little search and research before posting a question – Pete Jun 19 '18 at 15:52
1

You've missed a curly bracket in your CSS – Matt Jun 19 '18 at 15:53

How am I supposed to move this text inside this div to bottom center?

0 Answers0