I am trying to align vertically header text next to an image. My problem is when I decrease the window width and the text wraps (height is higher than image height) it starts to align to the top of image
.half {
width: 50%;
}
h4 {
font-size: 40px;
}
<div class="half">
<div class="advantages_header">
<img class="advantages_icon" src="http://placehold.it/90x90" />
<h4>HEADER TEXT MAYBE LONG</h4>
</div>
</div>
Oh! I just figured out by myself, thanks for reading, I hope it will help someone :)
.half {
width: 50%;
}
.advantages_header {
position: relative;
height: 90px;
}
h4 {
left: 110px;
margin-right: 110px;
font-size: 40px;
position: relative;
top: 50%;
transform: translate(0, -50%);
}
img {
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
<div class="half">
<div class="advantages_header">
<img class="advantages_icon" src="http://placehold.it/90x90" />
<h4>HEADER TEXT MAYBE LONG</h4>
</div>
</div>
Related
Hello I need to position an image as in the example. Theoretically it looks like it is positioned over 2 seperate boxes with different background colors, that is the goal, but practically it is not possible, at least for me. How to solve the problem?
Usually you'd do this with flex and vertical alignment, but since you want specifically the image to be between boxes i'd say absolute is the way to go here
.card {
display: block;
margin-left: 80px; /* image width + 20px */
}
.header, .image-container {
display: block;
margin: 0;
}
.header h1 {
margin: 0;
}
.image-container {
height: 1px;
position: relative;
}
.image-container .image {
display; inlnie-block;
width: 60px;
height: 60px;
border-radius: 50%;
background: purple;
position: absolute;
top: -50%;
left: -10px;
transform: translateY(-50%) translateX(-100%);
}
<div class="card">
<div class="header">
<h1>Header</h1>
</div>
<div class="image-container">
<div class="image"></div>
</div>
<div class="header">
<h1>Header 2</h1>
</div>
</div>
The simplest solution will be using a combination of an of z-index and position:absolute.
*A small suggestion if you may encounter the problem: you must use z-index with specifying the position (position: static will not work)
img {
width: 100px;
height: 100px;
z-index: 99;
position: absolute;
}
div {
background-color: black;
z-index: 1;
width: 200px;
height: 100px;
position: absolute;
top: 10px;
left: 5px;
}
<img src='https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1200px-Wikipedia-logo-v2.svg.png'>
<div></div>
I'm currently facing an issue regarding a Text over an image.
Here is my css code :
.box{
position: relative;
display: inline-block; /* Make the width of box same as image */
}
.box .text{
position: absolute;
z-index: 999;
margin: 0 auto;
left: 0;
right: 0;
text-align: center;
top: 40%; /* Adjust this value to move the positioned div up and down */
background: rgba(0, 0, 0, 0.8);
font-family: Arial,sans-serif;
color: #fff;
width: 60%; /* Set the width of the positioned div */
}
Here is my html :
<div class="box">
<img src="name.jpg" alt="">
<div class="text">
SpinnerBait Brochet
</div>
</div>
Here is how it looks like in codepen.io :
BUT, when i'm adding my html in my wordpress I have a completely different rendering.
I do have my picture where I added it in the page BUT my text is in the middle of my page (and not in the middle of my image...)
Do you have any idea what could be the issue ?
Thanks
By looking at your question my guess is that you are trying to center the text on top of the image.
Try the following:
HTML:
<div class="box">
<img src="https://via.placeholder.com/350" alt="Placeholder">
<div class="text">
SpinnerBait Brochet
</div>
</div>
CSS:
.box {
display: inline-block;
position: relative;
}
.box .text {
display: inline;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #000;
color: #fff;
}
CodePen here.
Essentially what the CSS is doing is:
Positioning the text absolutely in the center of it's relative container:
display: inline;
position: absolute;
top: 50%;
left: 50%;
Changing the starting position of the X and Y axes points to the true center of the element.
transform: translate(-50%, -50%);
Does anyone know how to place text after a container and it still be centered. Anyone know how to fix this? For some reason, If I don't put the position at the end if the program, it will go behind the banner picture, and if I when I try to center it doesn't work. I want them both centered, but the example to be after the banner, but whenever I try, it won't let me put the text at the right height, and be centered at the same time
.container {
position: relative;
text-align: center;
color: white;
}
.top-left {
position: absolute;
top: -8px;
left: -10px;
}
.bottom-left {
position: relative;
top: 29vh;
left:50%;
transform: translate(-50%, -50%);
}
<div class="container">
<img align="left">
<div class="top-left">
<img src="C:\Users\wadeb\OneDrive\Desktop\Untitled design.png" alt="Banner Picture" style="width:100vw;height:33vh" style="margin: 0px px"></p>
</div>
<div class="bottom-left">
Home
</div>
<h3 style=" text-decoration-style: bold; position: absolute;top:34vh; text-align: center;">example:</h3>
</div>
Any Ideas?
You are doing it all wrong, you shouldnt do img align like that simply add it after img url like this
<img src="url" align="left">
Are you asking for them both to be centered? If you are you can simply add <center> tag before container div and both will be centered. Be more precise.
I found the answer at How to center a "position: absolute" element
all I had to do was add
left: 0%;
right: 0%;
text-align: center;
I then simply did this
<span style="position: absolute; top: 38vh; left: 0%;right: 0%; text-align: center;">
What I'm trying to accomplish is making a box where the text will be exactly the same size relative to the box, no matter by what method the box is resized.
In the code below, the "small_box" has the intended behavior, it follows the bigger box no matter what, but the text does not. I would need the text to follow it as well.
Here's the codepen https://codepen.io/anon/pen/RxKowB (try resizing the window to see the behavior)
.box {
border: 2px solid black;
}
.box__frame {
width: 100%;
padding-bottom: 120%;
position: relative;
}
.box__small_box {
position: absolute;
top: 4%;
left: 10%;
width: 20%;
padding-bottom: 10%;
}
.box__text {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.box__text_name {
font-size: 8vw;
top: 60%;
}
.box__text_body {
text-align: center;
font-size: 5vw;
top: 70%;
}
<div style="max-width:800px;">
<div class="box box__frame">
<div class="box box__small_box"></div>
<div class="box__text box__text_name">
This is the title
</div>
<div class="box__text box__text_body">
This is the long description. This is the long description. This is the long description.
</div>
</div>
</div>
The solution may not be possible using CSS alone if the text is floating.
These libraries maybe of some help.
http://simplefocus.com/flowtype/
http://fittextjs.com/
I'm trying to display play button over responsive image. Button have 96x96px and need to be at center of image.
I tried many methods but always is bad. I read something about flex design, maybe it's simple to do in flex?
I need really simple method because there will be 5 to 10 elements.
Thanks and regards
If you give the image a parent element, you can make the overlay a background image of the parent and position it in the center of the parent.
div {
display: inline-block;
position: relative;
}
img {
max-width: 100%;
}
div:after {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 96px;
height: 96px;
background: url('https://img.clipartfest.com/d0227ce70c0b9f371e7a7a018729143e_thumbs-up-smiley-face-big-thumbs-up-clipart_2891-2674.jpeg');
background-size: cover;
content: '';
}
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>
And here is the same technique but with the overlay as an img in the parent.
div {
display: inline-block;
position: relative;
}
img {
max-width: 100%;
}
.thumb {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 96px;
height: 96px;
}
<div>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
<img src="https://img.clipartfest.com/d0227ce70c0b9f371e7a7a018729143e_thumbs-up-smiley-face-big-thumbs-up-clipart_2891-2674.jpeg" class="thumb">
</div>
Put your image into a relative container, and your play button as absolute. Somethinkg like this:
<div class="videoContainer">
<img src="link_to_your_image" alt="">
<img src="link_to_play_button" alt="play" class="playBtn">
</div>
and the css:
.videoContainer {
position: relative;
}
.playBtn {
position: absolute;
width: 96px;
height: 96px;
left: 50%;
top: 50%;
margin-left: -48px; /*half of the width */
margin-top: -48px; /*half of the height */
}