CODEWITHSUNDEEP
htmlcss
Marco Dinatsoli
Marco Dinatsoli

Reputation: 10580

css make the text center

this is my html

<div class="logoArea">
            <img  src="images/oifcoman-logo.jpg"/>
            <div class="titleClass">Call Center Dashboard</div>
        </div>

this is my css

.logoArea {
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
}

.titleClass {
    color: #343434;
    font-weight: normal;
    font-family: 'Ultra', sans-serif;
    font-size: 36px;
    line-height: 42px;
    text-transform: uppercase;
    text-shadow: 0 2px white, 0 3px #777;
    margin:auto;
    background-color:red;
    width:40%;
    top:10px;
}

This is what the result: enter image description here

I want it to be this: enter image description here

Upvotes: 0

Views: 76

Answers (5)

Gil
Gil

Reputation: 1804

There are few ways to solve this. Here is one with minimal changes to your existing styling.

.logoArea img {
    float: left;
}

Usually it requires additional changes in the code for actual centering in the parent window, but it seems to go well with the other styles you already have.

EDIT

Looking again at the result, I'm having second thoughts. My solution is good only for non-dynamic elements (elements that won't change dynamically but remain the same). Since it appears to be a header and therefore a relatively static element, my solution may still be valid, only with adding a required amount of padding-top to the center div. I don't know how much because in your example you used a very large font-size and I have no idea of the size of the image.

Upvotes: 1

Karim AG
Karim AG

Reputation: 2193

Set the image float:left; and the text display:inline-block; and the .logoArea text-align:center;.

Working fiddle

Upvotes: 1

Newbie
Newbie

Reputation: 287

Try this: HTML:

<div class="logoArea">
            <img  src="https://i.sstatic.net/O3d6S.jpg?s=128&g=1"/>
            <div class="titleClass">Call Center Dashboard</div>
    <div style='clear:both;'></div>        </div>

CSS:

.logoArea {
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
}
.logoArea img {display:block;width:100px;height:100px;float:left;}
.logoArea .titleClass {float:left;}

JavaScript (must include jQuery first)

$(document).ready(function(){
   var h=$('.logoArea').height();var ch=$('.logoArea .titleClass').height();
    var pTop=((h-ch)/2)+'px';
    $('.logoArea .titleClass').css('paddingTop',pTop);
});

Demo: http://jsfiddle.net/zcAjq/

Upvotes: 0

AlieN
AlieN

Reputation: 543

Try using:

<div class="logoArea" style="display:table-cell; vertical-align:middle">
            <img  src="images/oifcoman-logo.jpg"/>
            <div class="titleClass">Call Center Dashboard</div>
        </div>

Upvotes: 0

Newbie
Newbie

Reputation: 287

You can use CSS vertical-align:middle if the element is td (not div) or try this trick: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Upvotes: 0

Related Questions