I am currently centring an image in the horizontal using:
.centeredImage
{
text-align:center;
display:block;
}
<!DOCTYPE html>
<html>
<head>
<title>My Site</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<p class="centeredImage"><img id ="img" src="smallslide1.png"></p>
</body>
</html>
This works fine but I want to centre it vertically too. Not sure how to do about this. I tired to wrap it in a separate div
.centeredVert{
vertical-align: middle }
}
but this didn't do anything. could someone give me some pointers on how to do this please?
You could try the absolute positioning trick on the image itself:
.centeredImage img {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
<p class="centeredImage">
<img src="http://placehold.it/150x100">
</p>
Try this:
#img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
Here's the jsfiddle.
Related
I have a text {L U V B A G} that should appear under the image. I need the html and css for it.
This is how it looks.
enter image description here
{L U V B A G} that should appear under the image.
If you want the text to be on top of your image but at the bottom you can use z-index like the comment says or you can use position absolute on your text.
Code below is adapted from : https://www.w3schools.com/howto/howto_css_image_text.asp
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
font-size: 3rem;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<img src="https://tse3.mm.bing.net/th?id=OIP.qpsTLCVZFHVmKABv5VH7YAHaE8&pid=Api" alt="food" style="width:100%;">
<div class="centered">Best Food 2022</div>
</div>
</body>
</html>
If you don't necessarily want your text on top of the image but rather separated and under your image you can just do two rows and use flexbox.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.flex-container {
display: flex;
flex-direction: column;
text-align: center;
}
</style>
</head>
<body>
<div class="flex-container">
<img src="https://tse3.mm.bing.net/th?id=OIP.qpsTLCVZFHVmKABv5VH7YAHaE8&pid=Api" alt="food" style="width:100%;">
<div>Best Food 2022</div>
</div>
</body>
</html>
Hope that answered your question!
Solution Explained
You'll have one parent div, and inside it, you'll have an image and the text. The text (i.e. <h2>) will have position: absolute with z-index: -1 to make it one layer down the image, and we will need to add position: relative to the parent to stick the <h2> absolute position to this parent.
The top: 15%; right: 50%; transform: translate(50%, -50%); are mainly used to position the absolute <h2> properly, horizontally centered with a little top percentage you can manipulate depending on the image.
Extras like letter-spacing was used to give a proper look & feel like the image you provided.
* {
margin: 0;
padding: 0;
}
.banner {
position: relative;
height: 500px;
text-align: center;
}
.banner h2 {
position: absolute;
top: 15%;
right: 50%;
transform: translate(50%, -50%);
font-size: 10rem;
letter-spacing: 20px;
z-index: -1;
}
.banner img {
height: 100%;
}
<div class="banner">
<h2>LUVBAG</h2>
<img src="https://www.pngall.com/wp-content/uploads/2016/04/Women-Bag-Transparent.png" alt="">
</div>
I am having two images. I want to insert 2nd image on top of 1st image. 1st image is larger than the 2nd image. So I want my 1st image fully cover the div tag and 2nd image should place in the center of the 1st image. I had tried many css code but didn't get success.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="A.aspx.cs" Inherits="A" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.fishes { position: relative; top: 0; left: 0; } .fish { position: absolute; top: 60px; left: 80px; }
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="position: relative; left: 0; top: 0;">
<center> <img src="cropped-longheaderbog1.jpg" class="fishes"/>
<img src="bannerfans_17362179.png" class="fish"/> </center>
</div>
</form>
</body>
</html>
HERE IS THE OUTPUT OF THE CODE :
output
I want to place the upper image in the center. But don't know how to do?
There are multiple ways to do this. Here is the simplest in my opinion
https://jsfiddle.net/45gtzmho/
div {
width: 1280px;
}
img:first-of-type {
width: 800px;
}
img:last-of-type {
margin-left: -600px;
margin-top: 100px;
position: absolute;
z-index: 1;
}
This is my CSS
.test {
background-image:url('images/smiley.gif');
background-repeat:repeat;
}
This is my HTML:
<div class="test" id="xyz">some code which should come background to image</div>
The code that I have written sets a background image.
But I want to put an image on top of the text, instead of behind it, so that it covers the text. (I also want it to automatically repeat to fill the element, which could be any size.)
How can I do that?
This should do the trick. the :before selector creates a fake div with the given content (here a space, because without the content attribute, and I think with an empty string content, the fake div isn't created), and which can be styled. So the fake div is created, and styled with a background-image, a given height and width, and a z-index of 1, while the real div has a z-index of zero and appears below.
<!DOCTYPE html>
<html>
<head>
<title>Test page</title>
<style>
.test:before {
content: " ";
position: absolute;
width: 100px; height: 100px;
background-image:url('http://upload.wikimedia.org/wikipedia/commons/a/a4/Smiley_transparent.png');
background-repeat:repeat;
z-index: 1;
}
.test {
z-index: 0;
}
</style>
</head>
<body>
<div class="test" id="xyz">some code which should come background to image</div>
</body>
</html>
Combining this with Paul D. Waite's answer avoids having an explicit span in the code.
I thought the :before had to be applied to .test :first-child:before, so it would be a child of the xyz div, instead of being a sibling, but it seems it is not necessary (though it escapes me why).
You can test the result live on jsfiddle.
<!DOCTYPE html>
<html>
<head>
<title>Test page</title>
<style>
.test {
position: relative;
}
.test:before {
content: " ";
position: absolute;
top: 0;
bottom: 0;
height: auto;
left: 0;
right: 0;
width: auto;
background-image:url('http://upload.wikimedia.org/wikipedia/commons/a/a4/Smiley_transparent.png');
background-repeat:repeat;
}
</style>
</head>
<body>
Some text before.
<div class="test" id="xyz">some code which should come background to image</div>
Some text after.
</body>
</html>
Interesting task. I think this should do it, if you’re willing to put in an extra HTML element. (Alternatively, use .test:before instead of .test .foregroundImage, like in Georges’ answer).
HTML
<div class="test" id="xyz"><span class="foregroundImage"></span>some code which should come background to image</div>
CSS
.test {
position: relative;
}
.test .foregroundImage {
position: absolute;
top: 0;
bottom: 0;
height: auto;
left: 0;
right: 0;
width: auto;
background-image:url('images/smiley.gif');
background-repeat:repeat;
}
See http://jsfiddle.net/RUJYf/ for a working example.
CSS
<style type="text/css">
.test { position: relative; }
.test img, .test p { position: absolute; top: 0; }
.test img { z-index: 10; }
.test p { margin: 0; padding: 0; }
</style>
HTML
<div class="test">
<img src="images/smiley.gif" />
<p>some code which should come background to image</p>
</div>
I am trying to position an image to be at the top of the page and stretching to both sides of the page with a height of 51px. However, there is a gap between the image and the top of the page and both sides of the page. Please can you tell me what I am doing wrong?
#background {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:100%;
}
#twitter {
background: url(http://maxk.me/test/img/twitterbg.png) repeat;
height: 51px;
width: 100%;
position: fixed;
}
HTML
<html>
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="background">
<img src="...." class="stretch" alt="" />
</div>
<div id="twitter">
</div>
</body>
</html>
You need to remove the default margin on body:
html, body {
margin: 0;
padding: 0
}
You should also add a valid doctype as the very first line:
<!DOCTYPE html>
Without this, your page will be very broken in Internet Explorer, and generally inconsistent between different browsers.
how to vertical centering in gwt by using vertical panel.. or pls sugest me is there any way for doing vertical cetering
If you want to directly use the VerticalPanel from code, you need to use the setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE)
You can also use the UiBinder approach
<g:VerticalPanel verticalAlignment='ALIGN_MIDDLE' horizontalAlignment='ALIGN_CENTER' width="100%" height="500px">
<g:cell></g:cell>
</g:VerticalPanel>
Take a look to DevGuideUiPanels for examples and documentation
I can give you an example on how we did it with css (to implement a popup like behaviour).
If you google for it there are dozens of solutions on how to achieve vertical centering. This example worked for us, so no guarantee if it's of any help for you.
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0 auto;
}
.popup {
border-color:#ff4f00;
border-style:solid;
border-width:5px;
background-color: #ffffff;
text-align: left;
}
#wrapper, #container {
height: 150px;
width: 550px;
}
#wrapper {
bottom: 50%;
right: 50%;
position:
absolute;
}
#container {
left: 50%;
position: relative;
top: 50%;
}
</style>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>vertical centering</title>
</head>
<body>
<div style="width: 965px; height: 515px;"></div>
<div id="wrapper">
<div class="popup" id="container">
some content
</div>
</div>
</body>
</html>
EDIT: check also this question out.