How to align contents horizontally and vertically in a div? - html

Question

I tried to align content inside a div like this
but it shows me an unexpected behavior. Whenever I tried to use bootstrap class "pull-left" on span it behave like this. Also I want these contents vertically align in center. How can I do that.
.display-outside {
margin:20px 0;
}
.h1:hover {
color:#5d354a;
text-decoration:none;
}
span.extra > a {
padding:0 5px;
color:#444;
font-size:14px;
}
<div class="text-center display-outside">
<span class="pull-left">
<asp:Image ID="Image1" ImageUrl="~/images/logo/logo.jpg" Height="80px" Width="80px" CssClass="img-circle" runat="server" />
<i>Spirits Psychics</i>
</span>
<span class="extra">
Horoscopes
How It Works?
Need Help?
Questions&Answers
</span>
<span class="pull-right">
<i class="fa fa-facebook-square fa-3x social social-fb"></i>
<i class="fa fa-twitter-square fa-3x social social-tw"></i>
<i class="fa fa-google-plus-square fa-3x social social-gp"></i>
<i class="fa fa-instagram fa-3x social social-ig"></i>
</span>
</div>
<div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#categories">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<asp:Image ID="Image2" ImageUrl="~/images/logo/logo.jpg" Width="50px" Height="50px" CssClass="display-inside img-circle" runat="server" />
<a class="navbar-brand display-inside" href="home.aspx">Spirit Psychics</a>
</div>
<div class="collapse navbar-collapse" id="categories">
<ul class="nav navbar-nav">
<li class="dropdown">
Psychics Reading
<ul class="dropdown-menu horizontal-menu">
<li class="left">menu</li>
<li class="left">menu</li>
<li class="left">menu</li>
<li class="left">menu</li>
<li class="left">menu</li>
<li class="left">menu</li>
<li class="left">menu</li>
<li class="left">menu</li>
<li class="left">menu</li>
</ul>
</li>
<li class="dropdown">
Love Psychics
<ul class="dropdown-menu horizontal-menu">
<li class="left">menu</li>
<li class="left">menu</li>
<li class="left">menu</li>
<li class="left">menu</li>
<li class="left">menu</li>
<li class="left">menu</li>
<li class="left">menu</li>
<li class="left">menu</li>
<li class="left">menu</li>
</ul>
</li>
<li>Tarot Reading</li>
<li>Fortune Telling</li>
<li>Dream Analysis</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">More <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Astrology Reading</li>
<li>Career Forecasts</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Join Now</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
</div>
I don't know but it seems like something wrong with logo image.
Please give me solution.

Answer 1

An easy approach would be:
<div class="row display-outside">
<div class="text-left col-md-3">
<asp:Image ID="Image1" ImageUrl="~/images/logo/logo.jpg" Height="80px" Width="80px" CssClass="img-circle" runat="server" />
<i>Spirits Psychics</i>
</div>
<div class="extra text-center col-md-6">
<div class="center-v">
Horoscopes
How It Works?
Need Help?
Questions&Answers
</div>
</span>
<div class="text-right col-md-3">
<i class="fa fa-facebook-square fa-3x social social-fb"></i>
<i class="fa fa-twitter-square fa-3x social social-tw"></i>
<i class="fa fa-google-plus-square fa-3x social social-gp"></i>
<i class="fa fa-instagram fa-3x social social-ig"></i>
</div>
</div>
please note that I used the Bootstrap CSS class row for the wrapping div.
It should be wrapped in a container. Check the Bootstrap grid examples for more info on the use of 'col-...' classes.
Centering the links in the second div is done by the center-v class:
.center-v {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.extra {
...
position:relative; // Add this to your extra class
}