I am trying to center text that is on top of an image but it seems no matter what I do it won't center it
I also attempted using margin 0 auto but that didn't help either.
#search_box {
width: 100%;
height: 450px;
position: relative;
text-align: center;
}
#search_box h1 {
display: inline-block;
width: 50%;
top: 180px;
color: white;
background-color: red;
position: absolute;
}
<div id="search_box">
<img src="images/background_search.jpg" alt="search_box_picture"/>
<h1>SOME TEXT</h1>
</div>
like this?
#search_box {
width: 100%;
height: 450px;
position: relative;
text-align: center;
}
#search_box h1 {
display: block;
width: 50%;
top: 180px;
color: white;
background-color: red;
margin: auto;
}
<div id="search_box">
<h1>SOME TEXT</h1>
<img src="images/background_search.jpg" alt="search_box_picture"/>
</div>
#search_box {
width: 100%;
height: 450px;
position: relative;
text-align: center;
}
#search_box h1 {
display: inline-block;
width: 50%;
top: 180px;
color: white;
background-color: red;
position: absolute;
left:0;
right:0;
margin:0 auto;
}
<div id="search_box">
<img src="images/background_search.jpg" alt="search_box_picture"/>
<h1>SOME TEXT</h1>
</div>
Your image position is center according to parent div. H1 tag is not center aligned. you have to give left space to the absolute tag.
#search_box {
width: 100%;
height: 450px;
position: relative;
text-align: center;
}
#search_box h1 {
display: inline-block;
width: 50%;
top: 180px;
color: white;
background-color: red;
position: absolute;
left:25%;
}
<div id="search_box">
<img src="images/background_search.jpg" alt="search_box_picture"/>
<h1>SOME TEXT</h1>
</div>
Do you want something like this:-
.image {
position:relative;
text-align:center;
}
.text {
left: 0;
position:absolute;
top: 30px;
width: 100%;
}
<div class="image">
<img src="http://davidrhysthomas.co.uk/img/dexter.png" />
<div class="text">
Text of variable length
</div>
</div>
#search_box {
width: 100%;
height: 450px;
position: relative;
text-align: center;
}
#search_box h1 {
display: block;
margin: 0 auto;
width: 50%;
color: white;
background-color: red;
}
<div id="search_box">
<img src="images/background_search.jpg" alt="search_box_picture"/>
<h1>SOME TEXT</h1>
</div>
you want something like this?
Related
I have following HTML:
<div className={`page-header-profile-photo-container`}>
<div className="user-picture">
</div>
<div className="user-name">
<p>Sample GmbhH</p>
</div>
</div>
And my css:
.page-header-profile-photo-container{
position: absolute;
top: 10%;
right: 130px;
width: 200px;
}
.user-picture {
position: relative;
top: 10%;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #787567;
}
.user-name{
position: absolute;
top: 5%;
}
This renders like following:
I want to have some space between circular div and text. page-header-profile-photo-container's position has to be absolute.
How can I fix this?
First of all correct your syntax like className to class and try the following code. No need to position:absolute in user-name class
.page-header-profile-photo-container{
width: 200px;
position: absolute;
top: 10%;
right: 130px;
}
.user-picture {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #787567;
display: inline-block;
vertical-align: middle;
}
.user-name{
display: inline-block;
vertical-align: middle;
}
<div class=page-header-profile-photo-container>
<div class="user-picture">
</div>
<div class="user-name">
<p>Sample GmbhH</p>
</div>
</div>
Don't use absolute positioning in user name. Absolute positioning puts an item in a particular position no matter what (doesn't care if it gets overlapped)
Using flex-box it will work good for me. Hope this help.
.page-header-profile-photo-container{
background-color: #f5f5f5;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
position: absolute;
height: 50px;
top: 10%;
right: 130px;
padding: 5px 10px;
width: 200px;
}
.user-picture {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
/*background-color: #787567;*/
}
.user-picture img{
border-radius: 50%;
display: block;
height: auto;
max-width: 100%;
}
.user-name{
font-size: 15px;
}
<div class=page-header-profile-photo-container>
<div class="user-picture">
<img src="http://placehold.it/40x40" alt="Profile Picture" />
</div>
<div class="user-name">
<p>Sample GmbhH</p>
</div>
</div>
another newbie question here. Learning CSS. I am trying to do something that I thought would be very simple, but have not managed to find the way to do it, or a suitable answer to the question.
I have a simple project with a header, some content and a footer. The content has a div with a white border and an image inside it. I would like the div to be as wide as the image and no wider. I have provisionally set the width to 430px, but I would like to know the code to set the width to whatever the width of the image is.
Code
html
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap {
position: relative;
border: 1px solid white;
width: 430px;
display: block;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
}
<div id="header"> </div>
<div id="container">
<div id="imagewrap">
<img src="Images/01Folder/Image.jpg" height="100%" id="front" />
</div>
</div>
<div id="footer"> </div>
Add display: inline-block; to your .imagewrap without setting it's width.
.imagewrap {
display: inline-block;
}
If you want a div with an image to be centered, add another div around them with:
.wrapper {
display: flex;
justify-content: center;
align-items: center;
}
But do you really need that div around an image? The border might be added to an image itself without additional div.
If you want a border on the image, add it there
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap {
position: relative;
/*border: 1px solid white;
width: 430px;
display: inline-block;
line-height: 0;
margin: 0 auto;*/
top: 50%;
transform: translateY(-50%);
text-align: center; /*center image horizontally*/
}
#imagewrap img {
border: 1px solid white;
}
<div id="header"> </div>
<div id="container">
<div id="imagewrap">
<img src="https://unsplash.it/100/100" height="100%" id="front" />
</div>
</div>
<div id="footer"> </div>
Check out this fidde:
https://jsfiddle.net/56myv9g2/1/
#imagewrap img{
display:block;
}
#imagewrap{
position: relative;
border: 1px solid white;
display: inline-block;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
}
#container {
height: 80%;
width: 100vw;
text-align:center;
background-color: red;
}
Also, you could just give the border to the image tag all along without the div
If you set display: inline-block, then you need to add text-align: center to container
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
text-align: center;
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap{
position: relative;
border: 1px solid white;
width: 430px;
display: inline-block;
top: 50%;
transform: translateY(-50%);
}
<div id="header"> </div>
<div id="container">
<div id="imagewrap">
<img src="Images/01Folder/Image.jpg" height="100%" id="front" />
</div>
</div>
<div id="footer"> </div>
I am trying to achieve this
Image 1 and 3 would be slightly hidden behind image 2.
I have this html
<div class="imageBanner">
<div class="imageLeft">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageCentre">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageRight">
<img src="https://unsplash.it/600/400/">
</div>
</div>
Simple setup, single containing div with three sub divs each holding an image (identical native size).
Current CSS
.imageBanner {
display: flex;
align-items: center;
width:100%;
max-width: 1024px;}
.imageLeft img{
max-width: 60%;
}
.imageCentre {
z-index: 9999;
position: relative;
}
.imageCentre img{
width: 100%;
}
.imageRight img{
max-width: 60%;
}
So what I have done is aligned the images along the x axis using flex. I have then given the center image a position of absolute so that the z-index is taken into account. However this is where I run into the issue and the images are not laying out like the above example.
Here is a example if it helps
.imageBanner {
display: flex;
align-items: center;
width:100%;
max-width: 1024px;
}
.imageLeft img{
max-width: 60%;
}
.imageCentre {
z-index: 9999;
position: relative;
}
.imageCentre img{
width: 100%;
}
.imageRight img{
max-width: 60%;
}
<div class="imageBanner">
<div class="imageLeft">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageCentre">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageRight">
<img src="https://unsplash.it/600/400/">
</div>
</div>
I feel like I may be close and will keep trying but any help will be great!
Thanks
Tom
Did you think about something like this:
.imageBanner {
display: block;
position: relative;
margin: 0 auto;
width:100%;
max-width: 1024px;
}
.imageLeft {
width: 40%;
display: block;
position: absolute;
left: 0;
top: 30px;
z-index: -1;
}
.imageCentre {
width: 60%;
display: block;
position: relative;
z-index: 1;
margin: 0 auto;
}
.imageRight {
width: 40%;
display: block;
position: absolute;
right: 0;
top: 30px;
z-index: -1;
}
img {
width: 100%;
}
<div class="imageBanner">
<div class="imageLeft">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageCentre">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageRight">
<img src="https://unsplash.it/600/400/">
</div>
</div>
Left image's left indent you can set by change left: attribute, and right image's right indent change right:
.imageBanner {
display: flex;
align-items: center;
width:100%;
max-width: 1024px;}
img {
border: 5px solid red;
width: 100%;
height: auto;
}
.imageBanner {
display: flex;
align-items: center;
width:100%;
max-width: 1024px;}
img {
border: 5px solid red;
width: 100%;
height: auto;
}
.imageCentre {
width: 100%;
z-index: 900;
}
.imageLeft {
position: relative;
left: 5%;
}
.imageRight {
position: relative;
right: 5%;
}
.imageCentre {
width: 100%;
}
as shown in the fiddle: https://jsfiddle.net/fce2n85s/1/
nothing change in your code just add this css in your css code. if it's works answer me !
.imageBanner img {
border:solid 5px #000
}
.imageLeft {
text-align:right;
margin-right:-5px
}
How do I center a text over an image in css?
Here I'm attaching the code, I'm a newbie in css
<div class="image">
<img src="sample.png"/>
<div class="text">
<h2>Some text</h2>
</div>
</div>
<style>
.image {
position: relative;
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
margin: 0 auto;
width: 300px;
height: 50px;
}
</style>
How about something like this:
Its done by using position:absolute and z-index to place the text over the image.
#container {
height: 400px;
width: 400px;
position: relative;
}
#image {
position: absolute;
left: 0;
top: 0;
}
#text {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 150px;
top: 350px;
}
<div id="container">
<img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg" />
<p id="text">
Hello World!
</p>
</div>
You can use something like the following:
JS Fiddle
.image {
position: relative;
}
img {
width: 100%;
height: 200px;
}
.text {
position: absolute;
bottom:0;
left: 0;
width: 100%;
}
.text h2 {
text-align: center;
color: #FFF;
}
<div class="image">
<img src="https://cdn.photographylife.com/wp-content/uploads/2015/10/Wadi-Rum-5-650x434.jpg" alt="My Image" />
<div class="text">
<h2>Some text</h2>
</div>
</div>
Can anyone help me figure out what i'm doing wrong?
I want to insert the text inside "servicesTitle"in the middle of the image.
I have tried position, top, vertical align..and can't figure out what i'm doing wrong
<div class="services">
<p id="titleServices">Our Services</p>
<div class="servicesImages">
<div class="servicesImagesLeft">
<div id="cultureNews">
<div class="servicesTitle">Culture News</div>
<img src="/www/assets/newImages/services/190x136/Culture News1.jpg">
</div>
<div id="meetingPoint">
<div class="servicesTitle">Meeting Point</div>
<img src="/www/assets/newImages/services/190x136/MeetingPoint1.jpg">
</div>
</div>
<div class="servicesImagesCenter">
<div id="gallery">
<img src="/www/assets/newImages/services/460x330/Gallery.jpg">
<div class="servicesTitleActive">Gallery</div>
</div>
</div>
<div class="servicesImagesRight">
<div id="profile">
<div class="servicesTitle">Profile</div>
<img src="/www/assets/newImages/services/190x136/MeetingPoint1.jpg">
</div>
<div id="invitation">
<div class="servicesTitle">Invitation
<img src="/www/assets/newImages/services/190x136/MeetingPoint1.jpg">
</div>
</div>
</div>
</div>
</div>
CSS:
html, body {
margin: 0;
padding: 0;
}
#clear {
clear: both;
}
.services {
height: 100%;
margin-left: 7.5%;
margin-right: 7.5%;
}
.services p#titleServices {
text-align: center;
color: #ffffff;
padding-top: 40px;
}
.services .servicesImages {
border: 1px solid #fff;
margin-top: 65px;
text-align:center;
}
.services .servicesImages .servicesImagesLeft {
width: 190px;
height: 136px;
margin-top: 20px;
float:left;
position: relative;
}
.services .servicesImages .servicesImagesCenter {
display: inline-block;
margin: 0 auto;
width: 460px;
height: 330px;
}
.services .servicesImages .servicesImagesRight {
width: 190px;
height: 136px;
margin-top: 20px;
float:right;
position: relative;
}
.servicesImagesLeft #cultureNews {
width: 100%;
height: 100%;
}
.servicesImagesLeft #meetingPoint {
width: 100%;
height: 100%;
margin-top: 10px;
}
.servicesImagesCenter #gallery {
width: 100%;
height: 100%;
}
.servicesImagesRight #profile {
width: 100%;
height: 100%;
}
.servicesImagesRight #invitation {
width: 100%;
height: 100%;
margin-top: 10px;
}
.servicesImagesLeft img, .servicesImagesRight img {
opacity: 0.7;
}
.servicesTitleActive {
text-align: center;
margin-top: 25px;
color: #fff;
}
.servicesTitle {
color: #fff;
}
.services p#titleServices {
Needs to be:
.services .servicesTitle {
.servicesTitle {
color: #fff;
width: 100%;
height:100%;
position: absolute;
top:60%;
left:auto;
z-index:2;
}
http://jsfiddle.net/uHY7C/