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>
Related
I am beginner in web development, and i am trying to develop a responsive website. While developing i made one div element that has an image, then inside that i have one box with content "BUILD THAT MATTERS", which is inside a div with a class "firstBlock", the div "firstBlock" moves down when i click the hover button of navigation bar, but the box inside "BUILD THAT MATTERS", doesn't move.
I tried to make the image as a background image of the the div firstBlock, but that made the fitting of image in such a way that it got cropped, so is there any way so that the box inside the div moves with the navigation bar drop down menu, as of now only the firstBlock, that is the image moves, but inner box "BUILD THAT MATTERS" remains fixed in its position.
<-- html-->
<div id="firstBlock">
<img id="img1" src="image1.jpg">
<div class="box1">
<h1 class="text1">BUILD THAT MATTERS</h1>
</div>
</div>
/*CSS*/
#firstBlock {
display: flex;
height: 90%;
width: 100%;
}
#img1 {
width: 100%;
height: 100%;
object-fit: cover;
}
.box1 {
display: flex;
border: 5px solid black;
position: absolute;
top: 70%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
So, the box with content "BUILD THAT MATTERS" should move down with the first block when navigation drop down scrolls down.
fiddle link: https://jsfiddle.net/gj7v8huc/
git link: https://ayush-flash.github.io/StartupLandingPage/StartUpLandingPage/
Very simple rule:
make the parent of the absolute element relative
Your class:
.box1 {
display: flex;
border: 5px solid black;
position: absolute; # parent of this should be relative
top: 40%; # I set this to 40%
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
the parent:
#firstBlock {
display: flex;
height: 90%;
width: 100%;
position: relative; # take care of child with absolute position
}
What is this rule for?
When we have an element that has position: absolute it is removed from current flow of document. For bringing it back to the document's flow but meanwhile keeping it according to the need of absolute position, we can make the parent's position relative
It is all about parent and child element for using position:absolute. Parent element should have relative position so that the absolute child element will do the calculation of top and left from its expected parent. So apply position:relative to your firstBlock div.
#firstBlock {
display: flex;
height: 90%;
width: 100%;
position:relative;
}
Also change your box1 div top and left position as per your parent alignment. I have applied 50% like below.
.box1 {
display: flex;
border: 5px solid black;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
As I have already posted in the comment, below is the JSFiddle link.
DEMO
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 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
let's say I have to place an image RIGHT in a proper spot, but I need its CENTER to be in that spot. I wanted to place an image in the top-left corner of a div, so I placed the image in the div, gave position: relative to the div and position: absolute to the image then set its top and left values to 0. It quite worked but I'd need the CENTER of that image to be right over the top left corner. I'd do it manually setting top: -xpx, left: -ypx BUT I don't have any specific value for the image size (which could vary a lot).
So is there any way to say something like: position: absolute-but-i'm-talking-about-the-center; top: 0px; left: 0px;?
Thank you very much indeed!
Matteo
You could use javascript yo get the size of the image and then set the css left value needed.
Be mindful of the way images are loaded though as they are asynchronous so will not necesserily be available when the document is ready. This means that unless you handle the images correctly you will end up with width and height dimensions of 0.
You should wrap the image in another block element and put a negative left position to the image.
Something like this:
<div id="something">
<div class="imagewrap">
<img>
</div>
</div>
Then give #something a relative position, .imagewrap an absolute, etc... And img should have a relative position with left:-50%. Same for the top.
have you tried;
name_of_div_with_image {
display: block;
margin-left: auto;
margin-right: auto }
give that a go.
No need to use Javascript, this can be done in CSS.
The required HTML: (you must change the div to an img obviously)
<div id="container">
<div id="imgwrapper">
<div id="img">Change this div-tag to an img-tag</div>
</div>
</div>
The required CSS:
#container
{
position: absolute;
left: 200px;
top: 100px;
height: auto;
overflow: visible;
border: 2px dashed green;
}
#imgwrapper
{
position: relative;
margin-left: -50%;
margin-top: -50%;
padding-top: 25%;
border: 2px dashed blue;
}
#img
{
display: block;
width: 200px;
height: 100px;
border: 2px solid red;
}
Click here for a jsFiddle link
The margin-left: 50%; obviously works when using the container div, because the width of the container will be exactly that of the content. (You might need to add width: auto;)
But margin-top: -50%; will not work because the height of the container div will change with it, thus you need yet another wrapper div in which you use this margin-top: -50%; and then you need to fix this error it makes by using a positive percentage based padding. Obviously there may be other solutions to fix this, but the solution should be something like this.
Probably one of the simplest solutions is to place the image in the upper left corner at position
left: 0px; top: 0px; and then use translate to move its center to this position. Here's a working snippet for that:
#theDiv {
position: absolute;
left: 100px;
top: 100px;
background: yellow;
width: 200px;
height: 200px;
}
#theImage {
background: green;
position: absolute;
left: 0px;
top: 0px;
transform: translate(-50%, -50%);
}
<div id="theDiv">
<image width=31.41 height=41.31 id="theImage"></image>
</div>