I am trying to put my things in the tag at the center of the screen, but it is not working.
How can I put it in center of screen using HTML and CSS?
Where I am -
Code-
Result -
Assuming you have a .child element you want to center inside a .parent element, You have 2 options:
1) Flexbox - You can use the following css:
.parent {
display: flex;
flex-direction:
flex-wrap: nowrap;
justify-content: center;
align-content: center;
align-items: center;
}
.child {
flex: 0 1 auto;
align-self: auto;
text-align: center; /*optional*/
}
2) Absolute positioning:
.parent {
position:relative;
}
.child{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center; /*optional*/
}
It would be much easier if you provided some code you have written, but if you want to center a tag you can do this:
CSS:
#parentTag{
position: relative;
}
#myTagIWantToBeCentered{
position: absoulte;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
HTML:
<div id="parentTag">
<div id="myTagIWantToBeCentered">
<!--stuff here-->
</div>
</div>
If you need to center content horizontally and vertically use this:
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box_text {
color: #ffffff;
font-size: 20px;
font-weight: bold;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.box {
width: 100px;
height: 100px;
background-color: red;
margin:3px;
position: relative;
}
<div class="box"><span class="box_text">0</span></div>
If you are running on Bootstrap, you can easily add a class text-center. Normally, an (inline)-block element can be centered with css
.center { margin: 0 auto; }
It would be best if you could provide your code so we can suggest base on it.
You can try using CSS Flexbox. If you add
.class {
display: flex;
align-items: center; //Aligns the content vertically
justify-content: center; //Aligns the content horizontally
}
to the parent html element.
For an example, have a look at this js-fiddle https://jsfiddle.net/adamturner93/brjotz2y/1/.
You can try using HTML Tag if you are not using HTML5.
Ex-
<center>This text will be center-aligned.</center>
If you are using HTML5 then you need to use css to modify.
<element>.<class> {
margin-left: auto;
margin-right: auto;
width: 6em
}
Related
I'm working on a website for someone and just can't figure out the right way to align the "Pervious Case Study" text so that it's centered. I provided a screenshot for a visual reference -
div.sticky {
position: -webkit-sticky;
position: fixed;
display: inline-block;
white-space: nowrap;
left: 0;
top: 30%;
bottom: 50%;
color: white;
text-align: center;
background-color: #45256e;
padding: 60px;
font-size: 20px;
width: 130px;
height: 10px;
}
There are many ways.
Assume html looks like this.
HTML
<div class="block">
<div class="sticky">
Previous Case Study
</div>
</div>
using position absolute and translate
div.block {
position: relative;
width: 300px;
height: 300px;
}
div.block > div.sticky {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
}
Using flexbox
div.block {
width: 300px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
Is there another way of placing text over an image beside using position: absolute; ?
Working with position: absolute; on different screen sizes doesn't seem like the thing i want to do.
I kept looking for an answer but all i can find about it is the classic : use position absolute.
HTML:
<div class="header-container">
<img src="https://media.sproutsocial.com/uploads/2018/04/Facebook-Cover-Photo-Size.png" alt="" id="header-img" />
<p class="img-text">Make it possible!</p>
</div>
CSS:
#header-container {
max-height: 800px;
display: flex;
align-items: center;
justify-content: center;
}
.text-header {
position: absolute;
font-family: "Gayathri", sans-serif;
font-weight: 1000;
top: 45%;
left: 45%;
}
Try this instead,
add this style to img
#header-img{width:100%;height:auto;}
if you align text in center by
.text-header{
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#header-container {
max-height: 800px;
display: flex;
align-items: center;
justify-content: center;
}
#header-img{width:100%;height:auto;}
.text-header {
position: absolute;
font-family: "Gayathri", sans-serif;
font-weight: 1000;
top: 50%;
left: 50%;
color: white;
font-weight:800;
font-size: 30px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<div class="header-container">
<img src="https://media.sproutsocial.com/uploads/2018/04/Facebook-Cover-Photo-Size.png" alt="" id="header-img" />
<p class="text-header">Make it possible!</p>
</div>
Technically, no.
However, you can combine a text element with position: absolute inside of an element with position: relative. This will position the element in an absolute manner (based on pixels/percentages relative to the parent element itself, rather than the entire document.
Expanding on this, you could include an image in said element (either as a background image or as another absolutely positioned div, and use percentages to position your text relative to the container.
#rel{
display: block;
position: relative;
width: 400px;
height: 600px;
}
img{
width: 100%;
height: 100%;
}
h1{
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="rel">
<img src="https://picsum.photos/400/600">
<h1>Hello world!</h1>
</div>
I am trying to create this layout:
LINK
I need to create 3 containers and each container will have an image as a background. Tried to do it with SVG, but it's not an option, because in future images will be changed via CMS, so I need a shape, that images can fill in. Also tried to play with the border, so I can create a shape, but it's also not working the way it looks on the image above. Is there an easier way to achieve this? Let's say using bootstrap classes?
You can do it in two ways 1)using bootstrap classes 2)using #media and for showing proper image according to div size you can use .className{background-size:contain;background-repeat:no-repeat}
You may use flex, transform and pseudo to hold backgrounds:
/* http://codepen.io/gc-nomade/pen/vGvRPZ */
html,
body {
height: 100%;
width:100%;
margin: 0;
overflow: hidden;
}
body > div {
position:relative;
min-height: 100%;
width:100%;
display: flex;
width: 160%;
margin: 0;
margin-left: -30%;
}
div div {
display: flex;
align-items: center;
transform: skew(-30deg);
overflow: hidden;
border-left: solid;
flex: 4;
position: relative;
}
div div h2 {
font-size: 5vw;
color: turquoise;
text-shadow: 0 0 1px black;
position: relative;
text-align: center;
width: 100%;
transform: skew(30deg);
}
div div:nth-child(1) h2 {
padding-left: 50%;
}
div div:nth-child(3) h2 {
padding-right: 50%;
}
div div:before {
transform: skew(30deg);
content: '';
top: 0;
bottom: 0;
right: -50%;
left: -50%;
position: absolute;
background: url(http://hd.wallpaperswide.com/thumbs/grungy_background-t2.jpg ) center tomato;
background-size: 100vw auto;
}
div div:nth-child(2):before {
background: url(http://www.intrawallpaper.com/static/images/desktop-backgrounds-8656-8993-hd-wallpapers_js7gwWA.jpg) center right gray;
background-size: 100vw auto;
}
div div:nth-child(3):before {
background: url(https://wallpaperscraft.com/image/dark_background_colorful_paint_47176_300x188.jpg) center right turquoise;
background-size: 100vw auto;
}
div div:nth-child(2) {
flex: 2.5;
}
<div>
<div>
<h2>title 1</h2>
</div>
<div>
<h2>title 1</h2>
</div>
<div>
<h2>title 1</h2>
</div>
</div>
I'm trying to add text on all four sides of image but i cant get the right text to align properly. The right text is still on left side.
FIDDLE: https://jsfiddle.net/y75L0ww9/
<span class="top">Text on top</span>
<span class="left">Text on left side</span>
<img src="http://www.uaa.alaska.edu/web/images/horizontal-large.jpg" />
<span class="right">Text on right side</span>
<span class="bottom">Text on bottom</span>
img {
max-width: 100%;
height: auto;
border: 0px none;
vertical-align: middle;
display:block;
margin:0 auto;
}
.top, .bottom {
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.left {
display: inline-block;
background-color: #FF0;
transform: rotate(-90deg);
position: relative;
top: 200px;
left: 0px;
}
.right {
display: inline-block;
background-color: #F00;
transform: rotate(90deg);
position: relative;
right: 0px;
bottom: 200px;
}
You should add wrapper around Your image (for now it can be body), ad give it position: relative; Then modify .right class:
.right {
display: inline-block;
background-color: #F00;
transform: rotate(90deg) translate(0, -50%);
position: absolute;
right: 0px;
top: 50%;
}
updated fiddle
(btw. in wider viewport the left text is also not so nicely layed out right now ;) )
You will have to wrap all those 5 elements into another element, e.g.:
.wrapper {
display: inline-block;
position: relative;
}
Having this, you'll be able to easily align your spans inside by giving them position: absolute.
use position: absolute; instead of position: relative;
Updated fiddle
HTML
<div class="image-container">
<img class="image" src="image.png">
</div>
CSS
.image-container {
width: 95px;
height: 95px;
background: #000000;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.image {
max-width: 95px;
max-height: 95px;
}
This works fine on Chrome and Safari but not in Firefox. It's filling up the whole div and aspect ratio is not maintained. How to make this work on Firefox?
Chrome / Safari
Firefox
Because of your .image height stretch the image. Change your css like this.
.image {
width:100%;
}
.image {
max-width: 95px;
}
or
.image {
width: 100%;
}
.image{
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
In order to make it cross-browser you can use the following approach: Check working JsFiddle demo here
Only CSS required:
.image-container {
width: 95px;
height: 95px;
background: #000000;
display: table-cell;
vertical-align: middle;
}
.image {
width: 100%;
}