I have a card and I want to place an avatar in the middle of the card (photo 1), but when I make the screen smaller the avatar does not stay in the same position but it shifts to the right (photo 2). Can you help me?
photo 1
Card with avatar in the middle on normal size screen
photo 2
Image
Here is the code:
HTML
<div mat-card-avatar fxLayoutAlign="center">
<img mat-card-image src="{{current.avatar}}" class="circulo">
</div>
CSS
.circulo{
width: 80px;
height: 80px;
border-radius: 50%;
position: relative;
top: -35px;
}
remove the margin-left from .circulo it should be always in the center
It's not staying centered because you gave .circulo a fixed margin-left value. Removing this margin should automatically center the image.
If that doesn't work you could use something like below:
.outerDiv {
position: absolute;
}
.circulo {
width: 80px;
height: 80px;
border-radius: 50%;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Note: The .outerDiv class should be added to the div-element around the image.
Related
I have an image inside of a div to put a button on the image. I've searched around the web but can't find any way to center the image.
I've tried making it it's own class and centering the img tag itself, but none of them seem to work.
<div class="container">
<img src="https://cdn.discordapp.com/avatars/543553627600584735/470015f633d8ae88462c3cf9fa7fd01f.png?size=256" alt="utili">
Utili
</div>
The image should be centered in the middle of the page, so I can line up 3.
In HTML:
<img src="paris.jpg" alt="Paris" class="center">
To center an image, set left and right margin to auto and make it into a block element:
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
So, you can center any image while its inside a div. I hope this might help you.
You could position the .btn absolute to the relative container. If you know the size you want your image, even better.
How I would attempt to achieve it:
.container {
position: relative;
height: (the height of your image);
width: (the width of your image);
}
img {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
}
.btn {
position: absolute;
bottom: (however far you want it from the bottom in pxs - so lets say 10px);
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
I am trying to make a showcase section for a web page. It consists of a div with a (responsive) background image and a header that would be centered horizontally and vertically over this image. I've managed to get the image in and have it be responsive, and I've got the header centered, but my problem arises when the window size becomes smaller.
I'm using position: absolute, the top property, and transform to have it be centered, but the top property only works when height is specified in the parent container. However, when the window shrinks to the point where the image begins to shrink to below its original height, the text does not stay vertically centered, only horizontally (since I'm going off of the original height for top (800px)).
I can't just change the height with a media query since the image size is changing constantly and I can't not use height because then the top property would not work at all, so I'm a bit confused with how to get around this.
Here are the relevant sections of my code:
HTML:
<section class="showcase">
<div class="showcase-container">
<h1 class="centered"><span class="highlight">BR</span> Architects</h1>
</div>
</section>
CSS:
.container {
width: 80%;
margin: 0 auto;
padding: 0;
position: relative;
height: auto;
}
.showcase-container {
width: 80%;
margin: 0 auto;
padding: 0;
position: relative;
height: 800px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
I might just guess because I don't know how does this really look, but I assumed few things and in a result instead of background image I would just use normal image, make it blocky and display div over it, you will have height preserved in any size, take a look:
.showcase-container {
width: 80%;
margin: 0 auto;
padding: 0;
position: relative;
}
.showcase-container img {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
max-width: 1200px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
border-radius: 5px;
padding: 10px 20px;
}
<section class="showcase">
<div class="showcase-container">
<img src="https://source.unsplash.com/random/1200x700" alt="">
<h1 class="centered"><span class="highlight">BR</span> Architects</h1>
</div>
</section>
See MDN's <figcaption> documentation.
<figure>
<img src="/media/examples/hamster.jpg" alt="a cute hamster" />
<figcaption>Hamster by Ricky Kharawala on Unsplash</figcaption>
</figure>
If I'm understanding this right, you're saying you don't need to worry about the image always maintaining an 800px height, you just want the h1 to remain centered. In that case, it's really simple.
Just add your image as a background, setting the background-size to cover, then make sure the container is never larger than the window by setting its height to 100vh, but never taller than 800px by setting its max-height.
.showcase-container {
/* your styles here */
background-image: url('yourimage.jpg');
background-size: cover;
height: 100vh;
max-height: 800px;
}
OR if you need it to be vertically centered in the window independently of the container, you can always change top: 50%; to top: 50vh; and position relative to the body.
I have an image I want to have come out of the website from the left and right side. See the image for what I have so far.
I managed to get it to work by giving the div the image on the left is in a position absolute and a left of -30px, but when I do the opposite for the image on the right (aka position:absolute and right:-30px), the image doesn't get cut off like it does on the right side.
Instead, the page get wider to have space for the image on the right. I have no idea as to how to get this to work and I also don't really know how to word this issue and my searches have come up barely anything to do with what I'm trying to find.
Below the HTML for both sides:
<div class="imgdecalleft">
<img src="images/img/patroon.svg" alt="patroon">
</div>
</div>
<div class="imgdecalright">
<img src="images/img/patroon.svg" alt="patroon">
</div>
And the subsequent CSS:
.imgdecalleft {
width: 15%;
position: absolute;
left: -30px;
}
.imgdecalright {
width: 15%;
position: absolute;
right: -30px;
}
Add this:
body {
overflow-x: hidden;
}
Here is an alternate approach that relies on setting the image width to the width of the container div and then offsetting the image inside the container. Using overflow in this case only effects these divs and their images.
This should still allow the page to be scrollable horizontally on narrow screens.
.imgdecalleft {
width: 30%;
position: absolute;
left: 0px;
overflow: hidden;
}
.imgdecalleft img {
width: 100%;
position: relative;
left: -50%;
}
.imgdecalright {
width: 30%;
position: absolute;
right: 0px;
overflow: hidden;
}
.imgdecalright img {
width: 100%;
position: relative;
left: 50%;
}
<div class="imgdecalleft">
<img src="https://cdn.pixabay.com/photo/2012/03/01/15/47/abstract-20445_960_720.jpg" alt="patroon">
</div>
</div>
<div class="imgdecalright">
<img src="https://cdn.pixabay.com/photo/2012/03/01/15/47/abstract-20445_960_720.jpg" alt="patroon">
</div>
I have a container div where height and width are set to 100% and position is relative. Inside the div I center an image (image is smaller than div) using display: block and margin:auto. Then I am attempting to center text inside the image using position: absolute, left: 45%, top 82px. Vertical alignment appears to be okay, but as the number of characters in text grows the text is no longer aligned in the middle. So in my image below if text is 4 characters the text would no longer be centered. Is there a better way to dynamically align text?
html:
<div id="countup-container">
<img id="countup-image" src="https://i.stack.imgur.com/9YqKE.png" alt="Accident Free Days">
<span id="ctl00" class="countup-text">101</span>
</div>
Relevant CSS:
#countup-container {
height: 100%;
width: 100%;
position: relative;
}
#countup-image {
display: block;
margin: auto;
width: 300px;
height: 240px;
}
.countup-text {
z-index: 100;
position: absolute;
color: black;
font-size: 40px;
font-weight: bold;
left: 45.3%;
top: 82px;
}
If you are using absolute positioning to center it you would want to change your left: 45%; to left: 50%; then set a transform like this:
.thing_to_center_horizontal {
top 82px;
left: 50%;
transform: translateX(-50%);
}
This will make it center even with dynamic content.
left: 50%; will put it in the center based on the top left corner of the content, then transform: translateX(-50%); will move it 50% of the content's width (this is the dynamic part) to the left making it center.
Make sense?
But maybe a simple text-align: center; might work, but its hard to tell because you did not post any code.
If I understand you, you could simply add text-align:center to your #countup-container.
And remove left:45% to your .countup-text
I'm not sure how I would go about centering an image and then have a link floated up against the right side of the image and maintain the images position of true center. The following image is a mock up of what I am attempting.
I'm hoping there's a simple way to accomplish this using only css
You can use positioning to set the image to horizontal center with setting margin: 0 auto on the wrapper and the text in absolute position to this centered wrapper div:
.wrapper {
margin: 0 auto;
width: 150px;
position: relative;
}
.wrapper a {
position: absolute;
right: -100px;
top: 50%;
transform: translateY(-50%);
}
<div class="wrapper">
Learn more >
<img src="http://placehold.it/150x150">
</div>
Here is one way of doing it.
Apply position: relative to both the image and the link. Set a left margin of 50% to the image.
Use the left offset to move both the image and the link over by half the width of the image (assuming the image has a fixed/non-responsive width).
Using the left margin on the link to control the white space between the image and the link.
.wrap {
border: 1px dashed gray;
}
img {
margin-left: 50%;
position: relative;
left: -50px;
vertical-align: middle;
}
a {
position: relative;
left: -50px;
margin-left: 10px;
}
<div class="wrap">
<img src="http://placehold.it/100x100">
Learn More
</div>