How to position text in a div?


Tags: html,css,text,position

Problem :

I am a little confused about how to position text in a div. I want the text to be in the centre of the div height-wise, so I've tried changing the top padding and margin and also the position but nothing is working. This usually worked for me before so I don't know why it is not working now. Here is the code I have

<div class="foot">
    <div class="menu">English</div>
    <div class="menu">Maths</div>
    <div class="menu">Science</div>
    <div class="menu">SAM</div>
    <div class="menu">German</div>
</div>

and the CSS

.menu {
    width: 200px;
    display: inline;
    padding: 5px 7% 0% 7%;
    font-size: 20px;
    position: relative; 
}
.foot {
    width: 100%;
    height: 40px;
    position: fixed;
    bottom: 0px;
    background-color: #54a992;
    border-top: solid black 1px;
    text-align: center;
    opacity: 100%;
    z-index: 2;
    left: 0px;
}


Solution :

Vertical padding and margin doesn't work with inline display, For your purpose in my opinion inline-block display could be okay:

.menu{
    margin-top: 25%;  /* Adjust it as you wish */
    width: 80px;
    display: inline-block;
    font-size: 15px;
    position: relative;
}

JSFiddle


    CSS Howto..

    How to start ordered list from 2 not 1 with w3c validity and IE 6 compatibility?

    How can I print the selected item from bootstrap drop down using jquery or javascript in php

    How to solve Firefox 2.0 cross browser issues?

    How change color of text and image before print with css? [closed]

    How can I layout a sidebar or pullquote?

    overlay showing in background instead of on top

    Show on hover using CSS and HTML only

    Beginner's stuff: How to stop CSS' Divs from overlapping?

    How to change the css style for phone and desktop?

    How to edit Skype contact me button CSS?

    How do I center my content inside the menu?

    How do I code a BTN in an HTML project to open a users email client

    How to make tabs with pure HTML/CSS

    how to make a navigation 100% width within an header wrapper

    How to check the CSS hyphens in effect using Chrome developer tools?

    How do I center a Bootstrap div with a 'spanX' class?

    How to set css style to asp.net button?

    How to create a WordPress theme that use BootStrap?

    How do I use a gradient as a font color in CSS?

    How to expand input field to the right in a header bar

    How to make drop down show 2 columns

    How can I use CSS to center text in DIV

    Markup/Style best practices: How to efficiently distribute style rules over CSS classes?

    How can I use :nth-child() to select every other
    within ALL children?

    CSS flexbox: How to get column items to fill height

    How to position divs inline with same spacing

    jquery - How to determine if a div changes its height or any css attribute?

    css how to make H2 tag look same as H3 tag (turned out hard!)

    How do you apply a fading overlay to an image in CSS?

    How to stretch an input button to available width and center it's text using CSS padding and text-indent?