So I'm having this fiddle
I am trying too keep the profile picture in middle, even when screen width gets small.
The problem is with my position:absolute so margins:auto won't work.
Instead I used :left:40%.
Any ideas?
to center horizontally and vertically, using your code, you have to set
position:absolute + top/right/bottom/left:0 + margin:auto in img
#profile-page-header .card-image {
height: 225px;
}
#profile-page-header .card-profile-image img {
width: 110px;
position: absolute;
z-index: 1;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" />
<div class="row">
<div class="col s12 m8">
<div id="profile-page-header" class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="http://static.vecteezy.com/system/resources/previews/000/094/491/original/polygonal-texture-background-vector.jpg" alt="user background">
</div>
<figure class="card-profile-image">
<img src="http://zblogged.com/wp-content/uploads/2015/11/21.jpg" alt="profile image" class="circle z-depth-2 responsive-img activator">
</figure>
<div class="card-content">
<div class="row">
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
</div>
</div>
</div>
</div>
you need to use left:50%; then use margin-left:-55px; the margin left is 55 because your width is 110 so it is half of width.
#profile-page-header .card-profile-image {
width: 110px;
position: absolute;
top: 190px;
z-index: 1;
left: 50%;
cursor: pointer;
margin-left: -55px;
}
https://jsfiddle.net/IA7medd/eL01jjf9/2/
You can wrap the actual image within a container div with position: absolute. As the parent container is now absolutely positioned, .card-profile-image can now use margin: auto.
https://jsfiddle.net/eL01jjf9/5/
#profile-page-header .card-profile-image-container {
width: 100%;
position: absolute;
top: 190px;
z-index: 1;
}
#profile-page-header .card-profile-image {
width: 110px;
cursor: pointer;
margin: auto;
}
`
<div class="card-profile-image-container">
<figure class="card-profile-image">
<img src="http://zblogged.com/wp-content/uploads/2015/11/21.jpg" alt="profile image" class="circle z-depth-2 responsive-img activator">
</figure>
</div>
Related
This is my sample output, as you can see here that the image is half.
The second photo provided is the output i'm trying to achieve.
I don't know what seems to be the problem here, but when i remove the class, "carousel-inner" the image output is complete, but when i put it back, it shows only half image.
this is my html code and i'm using bootstrap 4
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-4">
<div class="customer-card">
<div class="customer-img">
<img src="assets/img/user-img/john.png" alt="customer image" class="">
</div>
<div class="customer-txt-area">
<p class="john">"With Finger Food, my birthday party was a real blast! Super finger food!"</p>
<h4><b>John Esacada</b></h4>
<small>Sydney</small>
</div>
</div>
</div>
</div>
</div>
</div>
.customer-card-parent{
margin-top: 41px;
width: 100%;
max-width: 964px;
margin-left: auto;
margin-right: auto;
}
.customer-card{
width: 100%;
max-width: 290px;
padding: 39px 0px 35px 0px;
border-radius: 5px;
background: #fff;
}
.customer-img{
position:absolute;
top: -55px;
left: 0;
right: 0;
width: 100%;
max-width: 100px;
height: 100px;
border-radius: 100%;
overflow: hidden;
margin-left: auto;
margin-right: auto;
border: 11px solid #fff;
background-color: #cecece;
}
.customer-img img{
width: 100%;
height: auto;
position: relative;
top: 21px;
transform: scale(1.4, 1.3);
}
.customer-txt-area .john{
font-size: 18px;
color: #696969;
margin: 0px;
padding-top: 40px;
padding-left: 15px;
padding-right: 18px;
line-height: 23px;
font-family: "MyriadPro";
}
.customer-img
{
position:absolute;
top: -55px;
left: 0;
right: 0;
width: 100%;
max-width: 100px;
height: 100px;
border-radius: 100%;
overflow: hidden;
margin-left: auto;
margin-right: auto;
border: 11px solid #fff;
background-color: #cecece;
}
you have to remove "overflow: hidden;" from the above code.
Just remove overflow: hidden; from the parent element, which is ".customer-img" in your case and remember to add padding of half the size of the image to ".customer-card" parent element .
.customer-img{
position:absolute;
top: -55px;
left: 0;
right: 0;
width: 100%;
top:-55px is pushing the image out of the card and since abolute position is used, height of card doesn't consider image height so use min-height or height for card.
.customer-card{
width: 100%;
min-height:300px;
max-width: 290px;
padding: 39px 0px 35px 0px;
border-radius: 5px;
background: #fff;
}
Try this solution
Add here
<div class="row">
Extra style
<div class="row" style="margin-top: 50px">
Just now, i managed to somehow "solved" the issue here without changing any css. I just added some classes to my carousel-inner.
as you can see in this photo, i added border class to my carousel-inner class in order to see the actual "height" and "width" of my div and it shows like this.
<div class="carousel-inner border ">
<div class="carousel-item active">
<div class="row">
<div class="col-4">
<div class="customer-card">
<div class="customer-img">
<img src="assets/img/user-img/john.png" alt="customer image" class="">
</div>
<div class="customer-txt-area">
<p class="john">"With Finger Food, my birthday party was a real blast! Super finger food!"</p>
<h4><b>John Esacada</b></h4>
<small>Sydney</small>
</div>
</div>
</div>
</div>
</div>
</div>
So, i tried adding some classes to my carousel-inner
<div class="carousel-inner border d-flex justify-content-center align-items-center">
<div class="carousel-item active">
<div class="row">
<div class="col-4">
<div class="customer-card">
<div class="customer-img">
<img src="assets/img/user-img/john.png" alt="customer image" class="">
</div>
<div class="customer-txt-area">
<p class="john">"With Finger Food, my birthday party was a real blast! Super finger food!"</p>
<h4><b>John Esacada</b></h4>
<small>Sydney</small>
</div>
</div>
</div>
</div>
</div>
</div>
and now it shows something like this.
this is my first question soo... i have to do someting like this:
but i search a lot and nothing work for me, i had something like this in my html and css
.thumbnail {
position: relative;
margin-bottom: 0;
border: 0;
border-color: transparent;
}
.caption {
position: absolute;
top: 40%;
left: 0;
width: 100%;
}
<div id="box-search">
<div class="thumbnail text-center">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Granola03242006.JPG/280px-Granola03242006.JPG" alt="">
<div class="caption">
<p>contacto#windberg.cl</p>
<p>+56983874071 | +56228231294</p>
<p>El Aguilucho 3174, Providencia, Región Metropolitana</p>
</div>
</div>
</div>
that work, but when i use the responsive mode from chrome, the text leave the image
(sorry for my english, i speak spanish)
img {
display: block;
}
.thumbnail {
position: relative;
display: inline-block;
}
.caption {
position: absolute;
top: 50%;
left: 50%;
transform: translate( -50%, -50% );
text-align: center;
color: white;
font-weight: bold;
}
<div id="box-search">
<div class="thumbnail">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Granola03242006.JPG/280px-Granola03242006.JPG" alt="">
<div class="caption">
<p>contacto#windberg.cl</p>
<p>+56983874071 | +56228231294</p>
<p>El Aguilucho 3174, Providencia, Región Metropolitana</p>
</div>
</div>
</div>
I'm trying to create a vertically aligned image, but also have it float left with a 10px padding.
Here is what I have so far:
<div class="container">
<div class="header">
<div class="headliner"><strong>blaw</strong>
<br />blah</div>
<div class="header_eta"></div>
</div>
<div class="content">
<div class="dummy"></div>
<div class="img-container">
<img src="http://placehold.it/75x75" alt="" />
</div>
</div>
<div class="footers"></div>
</div>
You can also check out this fiddle.
I can't seem to get the img to float: left. It seems to be centered horizontally. Once the I get the image floated left, I need to float some text to the left side of the image.
UPDATE: Something like this https://cdn.shopify.com/s/files/1/0070/7032/files/UberRUSH_Tracking_Page-5_1.png?5766570299208136168
Add text-align:left into img-container with padding-left:10px;
Like this:
.img-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align:left; /* Align center inline elements */
font: 0/0 a;
padding-left:10px
}
try float:lefton the image, then add a div into img-container also floated left with a suitable margin
<div class="img-container">
<img src="http://placehold.it/75x75" alt="" style="float:left;"/>
<div style="float:left;margin-left:10px;">Your Content</div>
</div>
In order to achieve your desired result, you can use the following CSS code:
/* Positioning */
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
Setting top: 50% and transform: translate(..., -50%) will center your element vertically.
Setting left: 0 and transform: translate(0, ...) will float your element horizontally to the left.
For optical reference you can check my code work in this fiddle.
<div class="container">
<div class="header">
<div class="headliner"><strong>blaw</strong>
<br />blah</div>
<div class="header_eta"></div>
</div>
<div class="content">
<div class="img-container-2">
<div class="img-cell">
<img src="http://placehold.it/75x75" alt="" />
</div>
</div>
</div>
<div class="footer"> </div>
</div>
<style type="text/css">
.content {height:300px; background-color:rgb(239, 65, 59);}
.header {height:60px; background-color:rgb(55, 102, 199);}
.img-container-2 {display:table; height:100%; width:100%; text-align:left;}
.img-cell {display:table-cell; vertical-align:middle;}
.headliner {padding:10px; height:50px;}
.footer {height:40px; background-color:rgb(66, 199, 123);}
</style>
img-container text align to left;
text-align: left;
here you code
.img-container {
position: absolute;
top: 10px;
bottom: 0;
left: 10px;
right: 0;
text-align: left;
/* Align center inline elements */
font: 0/0 a;
}
Once the I get the image floated left I need to float some text to the left side of the image.
So you will need to align two divs horrizontaly. For this you will need to use display: inline-block for both of them. By using this approach, you will need to put the image inside a div, and the text inside another div.
You could also make a table with the first td containing the text and the second td containing the image. Then float table to left.
Do you need like this,
Html code:
<div class="container">
<div class="header">
<div class="headliner"><strong>" blaw "</strong><br />" IS EN ROUTE "</div>
<div class="header_eta"></div>
</div>
<div class="content">
<div class="dummy"></div>
<div class="img-container">
<img src="http://placehold.it/75x75" alt="" />
</div>
</div>
<div class="footer">sdfsd</div>
</div>
css:
.content {
height: 100px;
position: relative;
width: 100%;
border: 1px solid black;
background-color: rgb(239, 65, 59);
}
.header {
height: 60px;
background-color: rgb(55, 102, 199);
}
.dummy {
padding-top: 100%; /* forces 1:1 aspect ratio */
}
.img-container {
position: absolute;
top: 10px;
bottom: 0;
left: 10px;
right: 0;
text-align: left;
}
.img-container:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.img-container img {
vertical-align: middle;
display: inline-block;
}
.headliner {
padding:10px;
height:50px;
}
.footer {
height: 40px;
padding-bottom: 0px;
padding-left: 5px;
padding-top: 5px;
background-color: rgb(66, 199, 123);
text-align: left;
}
you can refer a link:https://jsfiddle.net/vpbu7vxu/5/
I know that it is possible to put a text at the bottom of a block by using the absolute position and adding "bottom: 0;", but impossible for me. I try for a long time, but I can't. I am currently working on a slideshow in CSS3 and I grouped my 4 pictures in absolute position.
Here is my HTML code:
<h1 id="welcome-to">Welcome to! Web site for highly customized styles for the XenForo forum software.</h1>
<h1 id="all-available-styles">All available styles</h1>
<div id="slideshow">
<div id="slideshow-container">
<div class="slideshow-content">
<img src="images/image-1.jpg" alt="Image 1">
<span>First Image</span>
</div>
<div class="slideshow-content">
<img src="images/image-2.jpg" alt="Image 2">
<span>Second Image</span>
</div>
<div class="slideshow-content">
<img src="images/image-3.jpg" alt="Image 3">
<span>Third Image</span>
</div>
<div class="slideshow-content">
<img src="images/image-4.jpg" alt="Image 4">
<span>Fourth Image</span>
</div>
</div>
</div>
and my slideshow CSS code:
#slideshow
{
text-align: center;
height: 440px;
}
#slideshow #slideshow-container
{
position: relative;
}
#slideshow #slideshow-container img
{
position: absolute;
right: 0;
left: 0;
margin: 0 auto;
pointer-events: none;
}
#slideshow #slideshow-container span
{
position: absolute;
right: 0;
left: 0;
font-size: 15px;
}
I use a span to surround my text and adding "bottom: 0;" to:
#slideshow #slideshow-container span
{
position: absolute;
right: 0;
left: 0;
bottom: 0;
font-size: 15px;
}
The text remains attached to the top: http://i.stack.imgur.com/SyzTL.png
How can I do, please?
this will work for you i think.
#slideshow #slideshow-container {
position: static;
}
I have several images inside a container and I would like the images to be centered horizontally when the browser is resized. Currently, images align with the left edge like left: 0, I want them to overflow outside the left and right edge if container is narrower than the image. I thought margin: 0 auto would work. But it seems it doesn't. Basically this is what I want:
HTML:
<div class="container-fluid main-slide">
<div class="mask"></div>
<div class="cycle-slideshow" style="position: relative;">
<img src="/img/1.jpg" style="margin: 0 auto; min-width:100%; position: absolute; top:50%; transform: translateY(-30%);display:block;">
<img src="/img/2.jpg" style="margin: 0 auto; min-width:100%; position: absolute; top:50%; transform: translateY(-30%);display:block;">
<img src="/img/3.jpg" style="margin: 0 auto; min-width:100%; position: absolute; top:50%; transform: translateY(-30%);display:block;">
<img src="/img/4.jpg" style="margin: 0 auto; min-width:100%; position: absolute; top:50%; transform: translateY(-30%);display:block;">
</div>
</div>
CSS:
.main-slide{
height:520px;
width:100%;
max-width:1920px;
padding:0;
margin:0 auto;
overflow:hidden;
position: relative;
}
FIDDLE
The following trick will center an image horizontally even if that requires pushing the left side outside the container.
.cycle-slideshow {
position: relative;
/* for testing */
margin: 0 auto;
border: 10px solid #FC0;
width: 200px;
height: 200px;
}
.cycle-slideshow img {
position: absolute;
top: 0;
/* fill vertically */
width: auto;
height: 100%;
/* center horizontally */
left: -1000px;
right: -1000px;
margin-left: auto;
margin-right: auto;
/* for testing */
z-index: -1;
}
<div class="container-fluid main-slide">
<div class="cycle-slideshow">
<img src="http://dummyimage.com/800x200/000/fff">
<img src="http://dummyimage.com/600x200/000/fff" style="display: none;">
<img src="http://dummyimage.com/400x200/000/fff" style="display: none;">
<img src="http://dummyimage.com/200x200/000/fff" style="display: none;">
</div>
</div>
<!-- cycle plugin will cycle the images one by one -->
Updated Fiddle that uses cycle plugin
here's a fiddle for you; I think this is what you're looking for. http://jsfiddle.net/qo625xkb/
just added a slide class to your imgs. and...
<div class="container-fluid main-slide">
<div class="mask"></div>
<div class="cycle-slideshow" style="position: relative;">
<img class="slide" src="http://placekitten.com/g/200/300" />
<img class="slide" src="http://placekitten.com/g/200/300" />
<img class="slide" src="http://placekitten.com/g/200/300" />
<img class="slide" src="http://placekitten.com/g/200/300" />
</div>
took a different approach with the full container, center fill.
.main-slide{
height:520px;
max-width:1920px;
padding:0;
overflow:hidden;
position: relative;
border: 2px solid green;
}
.slide {
position: absolute;
min-height: 100%;
min-width: 100%;
transform: translate(-50%, -50%);
margin-left: 50%;
margin-top: 50%;
}