I would like to have my 4 social pictures (alt=test) in the center of my div (now they are appearing on the top center). I put text-align: center in .socials but it is not working. I also tried to put it in .socialdivs but it is also not working. The HTML and CSS code is below.
.socials {
width: 100%;
background-color: #5e6066;
text-align: center;
}
.socialdivs {
width: 100%;
margin: auto;
}
.fb {
display: inline-block;
width: 250px;
height: 155px;
margin: auto;
}
.fb:hover {
background-color: #4668b3;
}
.lin {
display: inline-block;
width: 250px;
height: 155px;
margin-top: auto;
}
.lin:hover {
background-color: #00a0dc;
}
.insta {
display: inline-block;
width: 250px;
height: 155px;
margin: auto;
}
.insta:hover {
background-color: #405de6;
}
.golden {
display: inline-block;
width: 250px;
height: 155px;
margin: auto;
}
.golden:hover {
background-color: #fcbf17;
}
.info {
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 20px;
}
<footer>
<div class="socials">
<div class="socialdivs">
<div class="fb">
<img src="img/facebook.png" alt="test" />
</div>
<div class="lin">
<img src="img/linkedin.png" alt="test" />
</div>
<div class="insta">
<img src="img/instagram.png" alt="test" />
</div>
<div class="golden">
<img src="img/goldenline.png" alt="test" />
</div>
<div style="clear:both"></div>
</div>
</div>
<div class="info">
Adrian © 2017 Thank you for your visit!
</div>
</footer>
Any help would be appreciated.
You can use line-height: 155px; to center it vertically. It needs to have the same height as the container. So, when the height of the container change, the line-height needs to be adjusted.
.socials
{
width:100%;
background-color: #5e6066;
text-align: center;
line-height: 155px;
}
.socialdivs
{
width: 100%;
margin: auto;
}
.fb
{
display: inline-block;
width: 250px;
height: 155px;
margin: auto;
}
.fb:hover
{
background-color: #4668b3;
}
.lin
{
display: inline-block;
width: 250px;
height: 155px;
margin-top: auto;
}
.lin:hover
{
background-color: #00a0dc;
}
.insta
{
display: inline-block;
width: 250px;
height: 155px;
margin: auto;
}
.insta:hover
{
background-color: #405de6;
}
.golden
{
display: inline-block;
width: 250px;
height: 155px;
margin: auto;
}
.golden:hover
{
background-color: #fcbf17;
}
.info
{
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 20px;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
<footer>
<div class="socials">
<div class="socialdivs">
<div class="fb">
<img src="img/facebook.png" alt="test" />
</div>
<div class="lin">
<img src="img/linkedin.png" alt="test" />
</div>
<div class="insta">
<img src="img/instagram.png" alt="test" />
</div>
<div class="golden">
<img src="img/goldenline.png" alt="test" />
</div>
<div style="clear:both"></div>
</div>
</div>
<div class="info">
Adrian © 2017 Thank you for your visit!
</div>
</footer>
</html>
You can use padding to set text in middle of div,(along with text-align:center;) like this:
.socialdivs
{
padding: 10%;
font-size: 18px;
text-align:center;
width:20%;
}
padding and margin by default show a good result in anchor tag so use display block in it
Related
I am stuck at the moment to put this 4 images (in the same row) inside of the div with image.
Html:
.iniciRo img {
width: 100%;
}
.iniciRo .coluna img {
width: 270px;
z-index: 4;
}
.iniciRo>div {
padding: 30px 0 10px 0;
}
.iniciRo .row>div {
padding-bottom: 20px;
}
.coluna {
position: relative;
padding-left: 15px;
padding-right: 15px;
float: left;
}
.row {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
max-width: 75em;
}
<div class="iniciRo">
<img src="assets/images/Rodape/backbot.png">
<div>
<div class="row">
<div class="coluna">
<img src="assets/images/Rodape/visitas-escolas.png" />
</div>
<div class="coluna">
<img src="assets/images/Rodape/rafc.png" />
</div>
<div class="coluna">
<img src="assets/images/Rodape/rioavetv.png" />
</div>
<div class="coluna">
<img src="assets/images/Rodape/galeri.png" />
</div>
</div>
</div>
</div>
I already tried to use z-index but nothing happened.
Any help is going to be appreciated, please help me...
Like this:
coluna img {
position: relative;
padding: 50em;
}
.iniciRo img{
position: absolute;
width: 100%;
}
.iniciRo > div{
padding: 30px 0 10px 0;
}
.iniciRo .row > div{
padding-bottom: 20px;
}
.coluna{
position: relative;
padding-left: 15px;
padding-right: 15px;
margin-bottom: 30em;
}
.row{
position: relative;
display: flex;
flex-direction: column;
width: 100%;
max-width: 75em;
clear: both;
}
In other words you want position: absolute for the iniciRo img, position: relative for .row, and the use of flexbox for .row. Here's a JS Fiddle.
Use this Flexbox css code
<div class="flex-container">
<div>
<img src="https://placehold.it/350x150" />
</div>
<div>
<img src="https://placehold.it/350x150" />
</div>
<div>
<img src="https://placehold.it/350x150" />
</div>
<div>
<img src="https://placehold.it/350x150" />
</div>
</div>
.flex-container{
display:flex;
}
.flex-container div {
flex:1;
margin:5px;
}
img {
width:100%;
}
I am trying to make a grid of pictures with padding in between inside the main_block div. I cant get the images to aline next to eachother and then break it with a becouse they go inline. inline block does not work. I tried making a new div for these images but i cant resize the pictures nor give them padding. I tried to make the pictures resizable but without results. iut is as if something is overriding the size of the pictures. The pictures stack upon eachother and im trying to maaake a grid.
Thanks in advance for any help!
This would be the optimal solution.
Here is the fiddle
https://jsfiddle.net/q2cr9ttL/1/
<style>
body {
margin: 0;
padding: 0;
}
#header {
background-color: #ff6600;
color: white;
text-align: left;
padding: 2px;
}
#nav {
line-height: 30px;
background-color: #fff000;
height: 350px;
width: 125px;
float: left;
padding: 5px;
}
#section {
width: 350px;
float: left;
padding: 10px;
}
#footer {
background-color: #737373;
color: white;
clear: both;
text-align: center;
}
#container {
margin: auto;
width: 900px;
text-align: left;
overflow: hidden;
}
.inner_block {
display: inline-block;
text-align: center;
width: 350px;
height: 200px;
}
.main_block {
text-align: center;
width: 750px;
}
.grid_block {
display: inline-block;
text-align: center;
width: 29%px;
height:100px;
}
</style>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<body>
<div id="container">
<!---container--->
<div id="header">
<h1>JORDAS</h1>
</div>
<!--header-->
<div id="nav">
Etusivu
<br>
Teltat
<br>
Palvelut
<br>
Yhteistiedot
<br>
</div>
<div id="section">
<div class="main_block">
<div class="grid_block">
<img src=Grafik/basictalt.png>
</div>
<div class="grid_block">
<img src=Grafik/basictalt.png >
</div>
<div class="grid_block">
<img src=Grafik/basictalt.png>
</div>
</div><!--mainblock-->
</div>
<div id="footer">
<h3>POP-UP TELTTOJEN YKKÖNEN </h3>
</div>
<!--footer-->
</div>
<!--container-->
</body>
You could use the flex display property.
You will need to include some prefixes for cross browser compatibility.
* {
box-sizing: border-box;
}
.main_block {
display: flex;
flex-wrap: wrap;
}
.grid_block {
width: 33%;
padding: 1.4em
}
.grid_block img {
max-width: 100%
}
/* ORIGINAL STYLES */
body {
margin: 0;
padding: 0;
}
#header {
background-color: #ff6600;
color: white;
text-align: left;
padding: 2px;
}
#nav {
line-height: 30px;
background-color: #fff000;
height: 350px;
width: 125px;
float: left;
padding: 5px;
}
#section {
width: 350px;
float: left;
padding: 10px;
}
#footer {
background-color: #737373;
color: white;
clear: both;
text-align: center;
}
#container {
margin: auto;
width: 900px;
text-align: left;
overflow: hidden;
}
.inner_block {
display: inline-block;
text-align: center;
width: 350px;
height: 200px;
}
.main_block {
text-align: center;
width: 750px;
}
.grid_block {
display: inline-block;
text-align: center;
width: 29%px;
height: 100px;
}
<div id="container">
<!---container--->
<div id="header">
<h1>JORDAS</h1>
</div>
<!--header-->
<div id="nav">
Etusivu
<br>
Teltat
<br>
Palvelut
<br>
Yhteistiedot
<br>
</div>
<div id="section">
<div class="main_block">
<div class="grid_block">
<img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg>
</div>
<div class="grid_block">
<img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg >
</div>
<div class="grid_block">
<img src=http://lorempixel.com/image_output/city-q-c-640-480-9.jpg>
</div>
</div><!--mainblock-->
</div>
<div id="footer">
<h3>POP-UP TELTTOJEN YKKÖNEN </h3>
</div>
<!--footer-->
</div>
<!--container-->
I have an logo in the header of the page and I want to make in centered.
This is my html:
body {
width: 90%;
margin: 0 auto;
}
header {
margin-top: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #b5b5b5;
}
.logo {
width: 250px;
height: 150px;
text-align: center;
}
<body>
<header>
<div class="row">
<div class="logo-row">
<img src="resources/img/logo.png" alt="logo" class="logo">
</div>
</div>
</header>
You need to add a width to the logo-row class and use margin: 0 auto.
body {
width: 90%;
margin: 0 auto;
}
header {
margin-top: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #b5b5b5;
}
.logo-row {
width: 250px;
margin: 0 auto;
}
.logo {
width: 100%;
height: 150px;
text-align: center;
}
<body>
<header>
<div class="row">
<div class="logo-row">
<img src="resources/img/logo.png" alt="logo" class="logo">
</div>
</div>
</header>
Giving text-align: center to the .logo-row, you may achieve the desired output:
header {
margin-top: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #b5b5b5;
}
.logo-row{
text-align: center;
}
.logo {
width: 250px;
height: 150px;
text-align: center;
}
<header>
<div class="row">
<div class="logo-row">
<img src="resources/img/logo.png" alt="logo" class="logo">
</div>
</div>
</header>
Add a new CSS rule for the div containing your image:
.logo-row {
text-align: center;
}
body {
width: 90%;
margin: 0 auto;
}
header {
margin-top: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #b5b5b5;
}
.logo {
width: 250px;
height: 150px;
text-align: center;
}
.logo-row {
text-align: center;
}
<body>
<header>
<div class="row">
<div class="logo-row">
<img src="resources/img/logo.png" alt="logo" class="logo">
</div>
</div>
</header>
Add this code to your CSS Section
.logo-row{ text-align: center; }
Try this.
img {
display:block;
margin-right:auto;
margin-left:auto;
}
Add the following CSS rule for the class applied to the img element (in your case .logo).
.logo {
display: block;
margin: 0 auto;
}
I'm trying to write a homepage with this little effect on a hover.
It should look something like this:
How would you do this? My code does not work like it should.
.stage_wrapper {
margin: 0 auto;
width: 1100px;
height: auto;
}
.work {
margin-left: 8px;
margin-right: 5px;
margin-bottom: 15px;
display: inline-block;
height: 350px;
width: 350px;
}
.work img {
width: 350px;
height: auto;
}
<div class="stage_wrapper">
<div class="stage">
<div class="work">
<a href="#" target="_blank">
<img src="//dummyimage.com/350" class="media" alt="#" />
<div class="caption">
<div class="work_title">
<h1>Something in 3 rows</h1>
</div>
</div>
</a>
</div>
</div>
</div>
Something like this?
.work {
width: 300px;
height: 300px;
line-height:300px;
text-align: center;
background-color: #2d3e50;
border: 10px solid #2a81b9;
color: white;
display: inline-block;
}
.work span {
display: none;
vertical-align: middle;
}
.work:hover span {
display: inline-block;
}
.work:hover img {
display: none;
}
<div class="work">
<span>Some text</span>
<img class="portfolio-image" src="http://dummyimage.com/300.png/09f/fff" width="300" height="300" />
</div>
I want to have a div with two images on the left, some centered text and some text on the right.
One of the many attempts:
http://jsfiddle.net/yu8bz4h4/
The problem is that I cant figure out how to get the p elements in the same line while keeping center and right the alignments
HTML:
<div class="outer">
<img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
<img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
<p class="center" >centered</p>
<p class="right" >right</p>
</div>
CSS:
.outer {
height: 50px;
width: 800px;
}
.icon {
width: 44px;
height: 44px;
}
.outer p {
margin 0;
}
.center {
text-align: center;
width: auto;
}
.right {
text-align: right;
width: auto;
}
Replace all p with div.Then write css code.The text comes in one line.
Hope this works.
.outer {
height: 50px;
width: 800px;
}
.icon {
width: 44px;
height: 44px;
}
.outer p {
margin 0;
}
.center {
margin-left:50%;
width: auto;
position:absolute
}
.right {
margin-left:100%;
width: auto;
position: absolute;
}
<div class="outer">
<img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
<img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
<div class="center" >centered</div>
<div class="right" >right</div>
</div>
I am pretty much sure you wanted something like this. Though your question is not clear. Never forget to write codes with semantic meaning. Here's your solution following more semantic way: codepen.
Or here:
.outer {
height: 50px;
width: 800px;
overflow: hidden;
}
.column {
width: 33.33%;
float: left;
}
.icon {
width: 44px;
height: 44px;
margin-right: 10px;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
<div class="outer">
<div class="column">
<img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
<img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
</div>
<div class="column">
<p class="center">centered</p>
</div>
<div class="column">
<p class="right">right</p>
</div>
</div>
Revised code in response to OP's comments:
.outer {
height: 50px;
width: 300px;
position: relative;
}
.icon {
width: 44px;
height: 44px;
float: left;
}
.center {
text-align: center;
width: 100%;
position: absolute;
left: 0;
}
.right {
position: absolute;
right: 0;
width: auto;
}
<div class="outer">
<img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
<img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
<p class="center">centered</p>
<p class="right">right</p>
</div>