I am trying to center the rounded image with the text, however I can not succeed to it.
What should I change to my code to do it?
https://jsfiddle.net/zxwz5739/
<div class="col-sm-6">
<div class="team-1-member">
<div class="round">
<center>
<img alt="Team Member" src="http://i.imgur.com/qIKR0Qt.gif">
</center>
</div>
<h2>John Doe</h2>
</div>
</div>
.team-1-member {
text-align: center;
margin-top: 48px;
}
.round {
border-radius: 50%;
overflow: hidden;
width: 150px;
height: 150px;
margin-bottom: 10px;
}
.round img {
display: block;
min-width: 100%;
min-height: 100%;
}
.team-1 h2 {
margin-bottom: 8px;
}
to .round add: display: inline-block;
For .round, change your margin-bottom: 10px; to margin: 0 auto 10px auto;.
I'd also suggest getting rid of your <center> tags. They're technically not supposed to be used anymore.
You can basically remove your outer div and center and change the image itself to display: inline-block.
New HTML code:
<div class="col-sm-6">
<div class="team-1-member">
<img alt="Team Member" src="http://i.imgur.com/qIKR0Qt.gif" class="round" />
<h2>John Doe</h2>
</div>
</div>
New CSS code:
.team-1-member {
text-align: center;
margin-top: 48px;
}
.round {
border-radius: 50%;
width:150px;
height:150px;
display: inline-block;
}
.team-1 h2 {
margin-bottom: 8px;
}
Result as jsfiddle.
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 need to position elements on a side like in the image above and have onclick function on them to show the corresponding text. Any info on how to best achieve this to be responsive?
By responseive i mean that the dots and text should always stay on the same position relative to the size of the bottle.
What I did was to put everything inside the container div and then positioned the elements relative to that div and the bottle image absolute to the container div.
It kinda works when container div has fixed dimensions, but I guess there are better ways to do it.
EDIT: Added code! I suck at formatting, sorry.
<div class="bottle-one">
<div class="bottle-one-content">
<div class="bottle-one-image">
<div class="message">
<div class="message-hidden">
<div>
text
</div>
<div>
<img src="assets/images/icons/line_blue.svg" alt="">
</div>
</div>
<a href="#msg1" class="droplet droplet1 js-drop">
<img src="assets/images/icons/droplet.svg">
</a>
</div>
<div class="message">
<div class="message-hidden">
<div>
text
</div>
<div>
<img src="assets/images/icons/line_blue.svg" alt="">
</div>
<a href="#msg2" class="droplet droplet2 js-drop">
<img src="assets/images/icons/droplet.svg">
</a>
</div>
</div>
<div class="message">
<div class="message-hidden">
<div>
text
</div>
<div>
<img src="assets/images/icons/line_blue.svg" alt="">
</div>
<a href="#msg3" class="droplet droplet3 js-drop">
<img src="assets/images/icons/droplet.svg">
</a>
</div>
</div>
<div class="message">
<div class="message-hidden">
<div>
text
</div>
<div>
<img src="assets/images/icons/line_blue.svg" alt="">
</div>
<a href="#msg4" class="droplet droplet4 js-drop">
<img src="assets/images/icons/droplet.svg">
</a>
</div>
</div>
<img src="assets/images/bottle1.png" alt="" class="bottle-one-bottle">
</div>
</div>
.bottle-one {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 30%;
}
.bottle-one-image {
height: 100%;
position: relative;
width: 251px;
}
.message {
left: -340px;
top: 180px;
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
text-transform: uppercase;
font-size: .7rem;
color: #004197;
height: 30px;
width: 400px;
margin-bottom: 1rem;
}
.message-hidden {
display: flex;
}
.message-hidden div:nth-of-type(1) {
text-align: right;
font-family: 'BrandonGrotesqueWeb-Black', sans-serif;
letter-spacing: 2px;
border-right: 1px solid #004197;
width: 70%;
}
.message-hidden div:nth-of-type(2) {
width: 30%;
display: flex;
overflow:hidden;
}
I came up with this to help you with aligning your element to the left of a div.
By using a mix of [psuedo-elements] and floats, I think this gives you the desired effect you are looking for. Post your code and I'll be more then happy to help you with the other part.
html {
width: 550px;
border: none;;
}
body {
font-family: sans-serif;
color: rgba(0,0,0,.15);
height:200px;
}
body:after {
content: '';
display: block;
clear: both;
}
div {
position: relative;
}
div:after {
font-size: 200%;
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.sibling {
border: 3px solid red;
height:200px;
}
.sibling.root:after {
content: 'Sibling';
color: green;
}
.float {
float: left;
border: 3px solid blue;
height: 90px;
width: 150px;
z-index: 1;
}
.float:after {
content: 'floated Element';
color: red;
}
.root {
overflow: hidden;
}
<div class="float">
</div>
<div class="sibling root">
</div>
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
I can't get this to work :( I'm just trying to float the image slightly outside the box (half in, half out) above the name but in the center. What am I doing wrong here?
body {
margin-top: 100px;
}
.box_info {
display: inline-block;
padding: 20px;
min-width: 300px;
background-color: #DDD;
border-radius: 4px;
text-align: center;
}
.box_info_name {
display: block;
font-size: 24px;
}
.box_info_logo {
max-width: 100%;
height: auto;
position: absolute;
text-align: center;
}
.box_info_name_inside {}
<div class="box_info">
<div class="box_info_name">
<img src="http://placehold.it/150x150" class="box_info_logo">
<div class="box_info_name_inside">Name</div>
</div>
</div>
Here is a fiddle: https://jsfiddle.net/ffxyc6d0/1/
try This One :
body{
margin-top:100px;
}
.box_info{
display: inline-block;
padding: 20px;
min-width: 300px;
background-color: #DDD;
border-radius: 4px;
text-align:center;
}
.box_info_name{
display: block;
font-size: 24px;
}
.box_info_logo{
width: 150px;
height: 150px;
position: relative;
bottom: 50px;
text-align:center;
}
.box_info_name_inside{
}
<body>
<div class="box_info">
<div class="box_info_name">
<img src="http://placehold.it/150x150" class="box_info_logo">
<div class="box_info_name_inside">Name</div>
</div>
</div>
</body>
If the image is fixed size (not going to change dynamically) you can position it with a negative margin of half the images height, e.g. margin-top: -85px; (Take an extra -10px off as well as the half image height since there's 20px of padding on the parent container)
Example below:
body {
margin-top: 100px;
}
.box_info {
display: inline-block;
padding: 20px;
min-width: 300px;
background-color: #DDD;
border-radius: 4px;
text-align: center;
}
.box_info_name {
display: block;
font-size: 24px;
}
.box_info_logo {
display: inline-block;
margin-top: -85px;
max-width: 100%;
height: auto;
text-align: center;
}
<div class="box_info">
<div class="box_info_name">
<img src="http://placehold.it/150x150" class="box_info_logo">
<div class="box_info_name_inside">Name</div>
</div>
</div>
You can do it with flexbox as well :)
body{
margin-top:100px;
}
.box_info{
background: #ccc;
}
.box_info_name{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
font-size: 24px;
}
.box_info_logo{
position: relative;
margin-top: -75px;
}
<div class="box_info">
<div class="box_info_name">
<img src="http://placehold.it/150x150/fff" class="box_info_logo">
<div class="box_info_name_inside">Name</div>
</div>
</div>
I like to give 'outside the box' answers to questions like this, without using javascript having to change all the margins gets to be a little annoying. So I've tackled it another way. Rather than moving everything around the page why not just make part of the background transparent.
.box_info {
display: inline-block;
padding: 20px;
min-width: 300px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 95px, #DDD 95px);
border-radius: 4px;
text-align: center;
}
.box_info_name {
display: block;
font-size: 24px;
}
.box_info_logo {
text-align: center;
}
.box_info_name_inside {}
<div class="box_info">
<div class="box_info_name">
<img src="http://placehold.it/150" class="box_info_logo">
<div class="box_info_name_inside">Name</div>
</div>
</div>
<div class="box_info">
<div class="box_info_name">
<img width="150px" src="https://lh4.googleusercontent.com/-1rv6qW3mpvA/AAAAAAAAAAI/AAAAAAAAS3M/xq0SSZzrgVg/photo.jpg" class="box_info_logo">
<div class="box_info_name_inside">Andrew Bone</div>
</div>
</div>
I've used background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 95px, #DDD 95px); to say anything after 95px should be #DDD and before that needs to be transparent.
95px is height of the image (150px) divided by 2 (75px) plus the padding of the outer box (20px).
Which is great if the image size stays the same, if you plan on it changing then we might need to look at adding a little javascript.
linear-gradient is not supported in IE6 but is in modern IE as well as Edge, Chrome, and firefox.
I hope you find this helpful.
I'm not sure if I'm understanding your question correctly, but maybe this is waht you wan't.
I've simply removed the position: absolute from your .box_info_logo class.
Like this:
body{
margin-top:100px;
}
.box_info{
display: inline-block;
padding: 20px;
min-width: 300px;
background-color: #DDD;
border-radius: 4px;
text-align:center;
}
.box_info_name{
display: block;
font-size: 24px;
}
.box_info_logo{
max-width: 100%;
height: auto;
text-align:center;
}
.box_info_name_inside{
}
<div class="box_info">
<div class="box_info_name">
<img src="http://placehold.it/150x150" class="box_info_logo">
<div class="box_info_name_inside">Name</div>
</div>
</div>
To keep .box_info the same size as that in your jsfiddle example, you can add position: relative to this class whilst keeping .box_info_logo as position: absolute.
body {
margin-top: 150px;
}
.box_info {
display: inline-block;
padding: 20px;
min-width: 300px;
background-color: #DDD;
border-radius: 4px;
text-align: center;
position: relative;
}
.box_info_name {
display: block;
font-size: 24px;
}
.box_info_logo {
max-width: 100%;
height: auto;
position: absolute;
text-align: center;
left: 0;
right: 0;
margin: auto;
bottom: 50px;
}
.box_info_name_inside {}
<div class="box_info">
<div class="box_info_name">
<img src="http://placehold.it/150x150" class="box_info_logo">
<div class="box_info_name_inside">Name</div>
</div>
</div>
I'm trying to create three buttons on either side of my main logo. These buttons should appear vertically center however when applying different display properties and/or margins and padding of 24px~ nothing changes. The attached JSFiddle shows the issue I have.
http://jsfiddle.net/LRaJy/
.header {
width: 100%;
background-color: #64767f;
background-position: bottom;
padding: 10px 0;
}
.header .logo {
background-image: url('../img/header-logo.png');
display:inline-block;
width: 415px;
height: 100px;
background: #fff;
}
.header-container {
width: 733px;
height: 100px;
margin: 0 auto;
}
.hover-buttons {
height: 44px;
display: inline-block;
padding-top: -5px;
}
.hover-buttons .button {
width: 44px;
height: 44px;
display: inline-block;
margin-right: 5px;
background: #fff;
}
with the HTML
<div class="header">
<div class="header-container">
<div class="hover-buttons">
<div class="button backups"></div>
<div class="button currency"></div>
<div class="button contact"></div>
</div>
<div class="logo">
</div>
<div class="hover-buttons">
<div class="button satisfaction"></div>
<div class="button security"></div>
<div class="button care"></div>
</div>
</div>
</div>
Is this what you're looking for?
jsFiddle Demo
.button, .logo {
vertical-align: middle;
}