I have a problem with centering .social divs in outer div. I was searching an answer but I can't find a working solution. Here's HTML:
<div class="socials">
<div class="social">
<img src="images/fb.png">
</div>
<div class="social">
<img src="images/insta.png">
</div>
<div class="social">
<img src="images/tt.png">
</div>
<div class="social">
<img src="images/snap.png">
</div>
</div>
And CSS:
.social {
width: 25px;
height: 25px;
float: left;
cursor: pointer;
}
I want to .social divs are next to each other and centered to .socials div.
This should help, give this try.
.social {
width: 25px;
height: 25px;
float: left;
cursor: pointer;
display: table-cell;
}
.socials {
display: table;
margin-left: auto;
margin-right: auto;
}
<div class="socials">
<div class="social">
<img src="images/fb.png">
</div>
<div class="social">
<img src="images/insta.png">
</div>
<div class="social">
<img src="images/tt.png">
</div>
<div class="social">
<img src="images/snap.png">
</div>
</div>
I think this is the answer you are looking for. Do this in your css
.social {
display: inline-block;
width: 25px;
height: 25px;
cursor: pointer;
}
.socials{
text-align:center;
}
Click here to see the codepen
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
I'm trying to align multiple inline-blocks at the top of my page, but for reasons that are baffling to me, it's not working. The CSS could hardly be cleaner or less, but the top isn't aligning properly. I thought it could be a floating issue, but even after applying a clear:both it doesn't fix this.
Please see the program here:
https://jsfiddle.net/yezwocta/
#page {
text-align: center;
}
.article {
width: 350px;
height: 150px;
margin: 5px;
display: inline-block;
background-color: #fafafa;
}
.article img {
float: left;
width: 150px;
height: 130px;
margin-top: 10px;
}
.content {
position: relative;
display: inline-block;
width: 170px;
height: 130px;
margin-top: 10px;
margin-left: 10px;
text-align: left;
}
.title {
font-size: 1.2rem;
}
.source {
font-size: 0.8rem;
position: absolute;
bottom: 0;
left: 0;
}
<div id="page">
<div class="article">
<a href="https://cnn.com" target="_blank">
<img alt="News" src="https://loremflickr.com/150/130/news?random=1">
<div class="content">
<span class="title">Cable News Network</span>
<span class="source">CNN</span>
</div>
</a>
</div>
<div class="article">
<a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">
<img alt="Firefox browser" src="https://loremflickr.com/150/130/browser?random=2">
<div class="content">
<span class="title">Get the Latest Firefox Browser</span>
<span class="source">Mozilla</span>
</div>
</a>
</div>
<div class="article">
<a href="https://www.kproxy.com/" target="_blank">
<img alt="kproxy" src="https://loremflickr.com/150/130/proxy?random=3">
<div class="content">
<span class="title">Surf the web anonymously and bypass filters</span>
<span class="source">kproxy</span>
</div>
</a>
</div>
</div>
Add vertical-align: top; to your .article CSS (the default is baseline):
#page {
text-align: center;
}
.article {
width: 350px;
height: 150px;
margin: 5px;
display: inline-block;
background-color: #fafafa;
vertical-align:top;
}
.article img {
float: left;
width: 150px;
height: 130px;
margin-top: 10px;
}
.content {
position: relative;
display: inline-block;
width: 170px;
height: 130px;
margin-top: 10px;
margin-left: 10px;
text-align: left;
}
.title {
font-size: 1.2rem;
}
.source {
font-size: 0.8rem;
position: absolute;
bottom: 0;
left: 0;
}
<div id="page">
<div class="article">
<a href="https://cnn.com" target="_blank">
<img alt="News" src="https://loremflickr.com/150/130/news?random=1">
<div class="content">
<span class="title">Cable News Network</span>
<span class="source">CNN</span>
</div>
</a>
</div>
<div class="article">
<a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">
<img alt="Firefox browser" src="https://loremflickr.com/150/130/browser?random=2">
<div class="content">
<span class="title">Get the Latest Firefox Browser</span>
<span class="source">Mozilla</span>
</div>
</a>
</div>
<div class="article">
<a href="https://www.kproxy.com/" target="_blank">
<img alt="kproxy" src="https://loremflickr.com/150/130/proxy?random=3">
<div class="content">
<span class="title">Surf the web anonymously and bypass filters</span>
<span class="source">kproxy</span>
</div>
</a>
</div>
</div>
I have some css issues. I'm trying to remove the space between a image and a label, and it does not work.
This is what I have:
And this is what I want:
I have problems with removing the space below he pictures and the same problem with the labels and the other div below them. In the same time I do not know how to position inline the headers from the footer.
This is my fiddle with my html and css:
https://jsfiddle.net/cwd6qw3o/
div img {
display: inline-block;
height: 30%;
width: 23%;
}
div.subtitle {
background-color: #333333;
color: white;
display: inline-block;
margin-top: 0;
text-align: left;
width: 23%;
}
div.subcolor {
background-color: #ba0927;
display: inline-block;
height: 5px;
width: 23%;
}
div.footer {
display: inline-block;
background-color: #e6e6e6;
width: 100%;
height: 5%;
}
Please tell me what i am doing wrong :).
Thanks !
I think it is not a good structure in your HTML,why not wrap your item in the same li such as
<ul>
<li>
<img src="~/Content/cont1.png"/>
<p>Bosch Car Service</p>
</li>
<li>
<img src="~/Content/cont2.png"/>
<p>Afspraak Proefrit</p>
</li>
<li>
<img src="~/Content/cont3.png"/>
<p>Afspraak onderhoud</p>
</li>
<li>
<img src="~/Content/cont4.png"/>
<p>Routebeschrijiving</p>
</li>
</ul>
You can remove spaces with the following CSS:
div {
font-size: 0;
}
div.subtitle {
font-size: 1rem;
}
Live preview: JSFiddle
Additional styling is necessary.
please try below code
div::after {
content: "";
width: 60%;
}
.image-div {
float: left;
width: 100%;
}
div img {
float: left;
height: 30%;
margin-right: 1%;
width: 23%;
}
div.subtitle {
background-color: #333333;
color: white;
float: left;
margin-right: 1%;
margin-top: 0;
text-align: left;
width: 23%;
}
.sub-div {
float: left;
width: 100%;
}
div.subcolor {
background-color: #ba0927;
float: left;
height: 5px;
margin-right: 1%;
width: 23%;
}
<body>
<img src="~/Content/slide1.png" id="slide" />
<div class="image-div">
<img src="http://dummyimage.com/200x200/000/fff"/>
<img src="http://dummyimage.com/200x200/000/fff" />
<img src="http://dummyimage.com/200x200/000/fff" />
<img src="http://dummyimage.com/200x200/000/fff" />
</div>
<div class="sub-div">
<div class="subtitle">
Bosch Car Service
</div>
<div class="subtitle">
Afspraak Proefrit
</div>
<div class="subtitle">
Afspraak onderhoud
</div>
<div class="subtitle">
Routebeschrijiving
</div>
</div>
<div>
<div class="subcolor" id="sub1"></div>
<div class="subcolor" id="sub2"></div>
<div class="subcolor" id="sub3"></div>
<div class="subcolor" id="sub4"></div>
</div>
<div class="footer">
<div class="images">
<img src="~/Content/fb.jpg"/>
<img src="~/Content/contact.jpg"/>
<img src="~/Content/route.jpg"/>
</div>
<div class="information">
<div class="contact">
<h1>Houman BVBA</h1>
<label>Boterstraat 6</label>
<label>B-2811 Hombeek (Mechelen)</label>
<label>Tel. 015 41 39 39</label>
<label>Fax. 015/43 24 40</label>
</div>
<div class="schedule">
<h1>Openingsuren</h1>
<label>Maandag: 9u-12u|13u-18u</label>
<label>Dinsdag: 9u-12u|13u-18u</label>
<label>Woensdag: 9u-12u|13u-18u</label>
<label>Donderdag: 9u-12u|13u-18u</label>
<label>Vrijdag: 9u-12u|13u-18u</label>
<label>Zaterdag: 9u-12u|13u-18u</label>
</div>
</div>
</div>
</body>
Im trying to put together some images together with an text under the images which will work as an menu, which should be centered horizontal under an header. The website is supposed to work as an responsive website. The HTML and CSS code is currently looking like this:
Edited
I want 5 images, each one of them shall have a text under them. And I want the my images together with the text to be centered.
HTML
<nav>
<div id="content">
<img src="ikoner/icon_90_2.png"/>
<div class="text">Utvecklingen sedan 90-talet</div>
</div>
<div id="content">
<img src="ikoner/icon_html5.png"/>
<div class="text">HTML5</div>
</div>
<div id="content">
<img src="ikoner/icon_html5video.png"/>
<div class="text">HTML5 Video</div>
</div>
<div id="content">
>img src="ikoner/icon_responsive.png"/>
<div class="text">Responsive Webdesign</div>
</div>
<div id="content">
<img src="ikoner/icon_heart.png"/>
<div class="text">Emotional Design</div>
</div>
</nav>
CSS
#content {
position: relative;
width: 15%;
display: inline-block;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#content img {
padding-top: 370px;
width: 100px;
}
.text {
font-size: 12px;
font-family: 'ciclethin';
text-decoration: none;
}
You're not aligning your "Nav" div anywhere.
So, I've changed the id="content" to classes, because IDs should be unique to the page.
Set nav element to text-align:center. Here's a fiddle, and the relevant code:
http://jsfiddle.net/cw16tkdn/2/
<nav>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">Utvecklingen sedan 90-talet
</div>
</div>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">HTML5
</div>
</div>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">HTML5 Video
</div>
</div>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">Responsive Webdesign
</div>
</div>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">Emotional Design
</div>
</div>
</nav>
and CSS:
nav {
text-align:center;
}
.content {
display: inline-block;
text-align: center;
}
.content img {
width: 100px;
}
.text {
font-size: 12px;
font-family:'ciclethin';
text-decoration: none;
}
maybe you want this: (i have changed id=content with class=content in html code!)
.content {
position: relative;
width: 100px;
display: inline-block;
height: 520px;
text-align: center;
vertical-align:bottom;
}
.content img {
padding-top: 370px;
width: 100px;
display:block;
margin: auto;
}
.text a {
font-size: 12px;
font-family: 'ciclethin';
text-decoration: none;
}
.text {
height: 3em;
}
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
<style>
#metro {
width: 100%
height: auto;
font-size: 16px;
}
#metro .metro_half_row {
width: 50%;
float: left;
height: 100px;
color: white;
background-color: grey;
}
#metro .metro_half_row a {
display: block;
height: inherit;
text-align: center;
}
</style>
<div id="metro">
<div class="metro_half_row">
<a href="#">
<h1>TEXT1</h1>
<h2>TEXT</h2>
</a>
</div>
<div class="metro_half_row">
<a href="#">
<h1>TEXT1</h1>
<h2>TEXT</h2>
</a>
</div>
<div class="metro_half_row">
<a href="#">
<h1>TEXT1</h1>
<h2>TEXT</h2>
</a>
</div>
<div class="metro_half_row">
<a href="#">
<h1>TEXT1</h1>
<h2>TEXT</h2>
</a>
</div>
</div>
I've wrapper as #metro, .metro_half_row as each section, using a display: block
Right now the text in <a> is centered horizontally, but not vertically. I need to center the text contained in the links, and each <a> covering the entire sub div block both horizontally and vertically.
display: table and display: table-cell are your friends.
#metro {
width: 100%;
height: auto;
font-size: 16px;
}
#metro .table-block {
width: 100%;
display: table;
}
#metro .table-cell {
width: 50%;
display: table-cell;
vertical-align: middle;
}
#metro .metro_half_row {
width: 100%;
height: 100px;
color: white;
background-color: grey;
display: table;
}
#metro .metro_half_row a {
width: 100%;
display: table-cell;
height: inherit;
text-align: center;
vertical-align: middle;
}
<link href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css" rel="stylesheet" />
<div id="metro">
<div class="table-block">
<div class="table-cell">
<div class="metro_half_row">
<a href="#">
<h1>TEXT1</h1>
<h2>TEXT</h2>
</a>
</div>
</div>
<div class="table-cell">
<div class="metro_half_row">
<a href="#">
<h1>TEXT1</h1>
<h2>TEXT</h2>
</a>
</div>
</div>
</div>
<div class="table-block">
<div class="table-cell">
<div class="metro_half_row">
<a href="#">
<h1>TEXT1</h1>
<h2>TEXT</h2>
</a>
</div>
</div>
<div class="table-cell">
<div class="metro_half_row">
<a href="#">
<h1>TEXT1</h1>
<h2>TEXT</h2>
</a>
</div>
</div>
</div>
</div>
If i understand your problem correctly in your case, the CSS may look like this:
a{
margin-top:25px;
}
or
a{
position: relative;
top: 25%;
}
Try:
#metro .metro_half_row a {
display: table-cell;
width: inherit;
vertical-align: middle;
height: inherit;
text-align: center;
}
#metro .metro_half_row {
display: table;
}
view http://jsfiddle.net/alemarch/589pqd62/
I'm trying to make these 4 images to be circle but I guess I'll just use images later but anyway. I'm trying to put a title under the image (bottom-middle) but instead its at the top. This is what happened.
.services img{
border-radius: 50%;
padding-left: 10px;
float: left;
display: block;
}
<section class="services">
<h1 style="text-align:center; font-size:38px;">Services we offer</h1>
<div class="circle">
<img src="http://placehold.it/290x250">
<h3>Title</h3>
</div>
<div class="circle">
<img src="http://placehold.it/290x250">
<h3>Title</h3>
</div>
<div class="circle">
<img src="http://placehold.it/290x250">
<h3>Title</h3>
</div>
<div class="circle">
<img src="http://placehold.it/290x250">
<h3>Title</h3>
</div>
</section>
So it'd look like my design.
You need also to set the .circle class to float left:
.circle
{
width: 25%;
float: left;
}
http://jsfiddle.net/yh988n5e/
.circle{
text-align: center;
display: inline-block;
}
.services img{
border-radius: 50%;
padding-left: 10px;
display: block;
}
http://jsfiddle.net/mx7xknzr/1/