I'm trying to center align my Logo of my screen but not able to accomplish. Please help.
HTML
<!-- Header Start -->
<div class="MastHead" data-role="header" data-position="fixed" data-tap-toggle="false">
<div class="HeaderLft"><img alt="" title="" src="images/top_lft_arrow.png" /></div>
<div class="HeaderRgt"><div class="TopRedBox"><a href="#" data-rel="back" data-transition="slide" data-direction="reverse" id=saveFav>Save</a></div></div>
<div class="HeaderLogo">LOGO</div>
</div>
<!-- Header Ends -->
CSS
.HeaderLogo
{
position: absolute;
margin:0 auto;
width: 100px;
top:10px;
}
2 Possibilities:
.HeaderLogo {
width: 100%;
text-align: center;
}
Or
html
<div class="HeaderLogoWrapper"><div class="HeaderLogo">LOGO</div></div>
css
.HeaderLogoWraper {
margin: 0 auto;
text-align: center;
width: 100%;
}
One method to do this is to put all your div tags into another div with the class wrapper.
You can then add the CSS text-align: center; on your wrapper class and that will center align your header.
This is shown in this Fiddle. Hope it helps.
Like this
demo
css
.HeaderLogo {
margin: 0 auto;
width: 100px;
text-align:center;
}
demo1
.MastHead {
border: 1px solid red;
}
.HeaderLogo {
margin: 0 auto;
width: 100px;
text-align:center;
float:left;
}
.TopRedBox{
float:right;
}
Try this
.HeaderLogo
{ position: absolute;
margin:0px; auto;
width: 100%;
text-align:center;
}
DEMO
If you want to center the image, you can do that with CSS property background-position:
.MastHead {
background-image: url('mylogo.png);
background-position: top;
}
Reference on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position?redirectlocale=en-US&redirectslug=CSS%2Fbackground-position
It will not work in IE6 (not sure with IE7) if someone is still using them...
I hope this will work for you
Can you use margin-left: property instead of margin.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<head>
<style type="text/css">
.HeaderLogo
{
position: absolute;
width: 100px;
top:10px;
margin-left:45%;
}
</style>
</head>
<body>
<div class="MastHead" data-role="header" data-position="fixed" data-tap-toggle="false">
<div class="HeaderLft">
<a href="#dashboard" data-transition="slide" data-direction="reverse">
<img alt="logo" title="" src="images/top_lft_arrow.png" />
</a>
</div>
<div class="HeaderRgt">
<div class="TopRedBox">
<a href="#" data-rel="back" data-transition="slide" data-direction="reverse" id=saveFav>
Save
</a>
</div>
</div>
<div class="HeaderLogo">LOGO
</div>
</body>
</html>
I hope this will work, and if it isn't working, then you can set position:relative
Follow instruction here. https://www.w3schools.com/css/css_align.asp
.className {
margin: auto;
}
This should work!
Related
I'm trying to make a layout like on the picture but I'm struggling with canvas positioning. How can I put h1 forward?
Also, whats better for the black and white skewed rectangles? To do them with CSS or another Canvas on top of the first one?
Also I would appreciate some advice on responsiveness of this layout.
body {
font-family: 'Roboto', sans-serif;
background-color: #181818;
padding:0;
margin:0;
}
p{
color: #f0f0f0;
}
h1 {
text-align: center;
text-align: left;
font-size: 10em;
}
h2 {
text-align: center;
margin: 40px 0px;
color: #f0f0f0;
}
td{
width: 50%;
text-align: center;
}
canvas{
width:100%; height:100%;
position:absolute; top:0px; left:0px;
background-image: linear-gradient(to bottom right, red, #380000);
z-index: 0;
}
.homepage .portfolioPage{
position: absolute;
z-index: 1;
}
/* .mainWrapper {
position: relative;
} */
.mainPage{
margin-top: 50px;
display: inline-block;
align-content: center;
}
.rightbox{
padding: 0 40%;
width: 600px
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- Font -->
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght#700&family=Roboto&display=swap" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<title> </title>
</head>
<body>
<div class="mainWrapper">
<canvas id="#particles-js" width="1000" height="500"></canvas>
<!-- Homepage -->
<div class='homepage'>
<table style="width:100%">
<tr>
<!-- Left Side -->
<td>
<div class='mainPage'>
<div class="blk-box">
<div class="block">
<h1>Barqawi</h1>
</div>
<div class="block">
<h1>Maroun</h1>
</div>
<div class="block">
<h1>Grey</h1>
</div>
</div>
</div>
</td>
<!-- Right Side -->
<td>
<div class='mainPage'>
<div class="rightbox">
<p id="jrdev">Jr Software Developer</p>
<div class="portfolioBtn">
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
</body>
I figured out. Just in case someone need it, here is the code.
canvas {
width:100%; height:50%;
top:0px; left:0px;
background-image: linear-gradient(to bottom right, red, #380000);
position: absolute;
z-index: -1;
}
.mainWrapper {
position: relative;
}
.homepage {
position: relative;
}
The tag
<h1>
is normally reserved for SEO keywords. Anyway, you can do the following:
.block { transform: skewX(-10deg);}
If you don't want the text to be skewed along, you should define another element outside to contain the text and then use negative margin or absolute positioning to fix the position of the text.
As for mobile reponsiveness, I would advise converting all absolute lengths to relative lengths, eg. 100%, 100vh, 100vw etc.
You can also use media queries to specify separate layouts for portrait and landscape orientations:
#media only screen and (orientation: portrait) {
body {
...
}
...
}
#media only screen and (orientation: landscape) {
body {
...
}
...
}
#div {}
img {
height: 200px;
}
#img1 {
float: left;
}
#img2 {
float: right;
}
#img3 {
float: right;
}
<div id="div">
<img id="img1" src="https://image.freepik.com/free-photo/blue-mountains-famous-tourism-scenery-lijiang_1417-1143.jpg" alt="">
<img id="img2" src="https://images.pexels.com/photos/490411/pexels-photo-490411.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
<img id="img3" src="https://previews.123rf.com/images/smileus/smileus1505/smileus150500016/40147459-colorful-sunset-scenery-in-rural-landscape-with-a-bench-and-a-path-in-the-foreground-gold-fields-and.jpg" alt="">
</div>
Currently, when you shrink the screen horizontally, the images start stacking vertically, which I don't want, I want them to all stay on the same horizontal line.
I'm looking how to do the following things:
Make an image disappear when it starts overlapping another image.
Make the images push to the right past the vertical scroll bar when the images start to overlapping.
The reason I ask for both is because I've now got two projects where each require one of those two and I don't know how to do it :P
I'd also like to avoid #media only screen and (max-width: ---px) if possible.
You need to add separate div for each image, and arrange it by display: flex element. Also use margin for align contents inside the flex div.
#div {
display: flex;
}
.new {
max-height: 200px;
}
.left {
margin-right: auto;
}
img {
max-width: 100%;
max-height: 200px;
}
#media (max-width: 768px) {
.hidden-xs {
display:none;
}
}
<div id="div">
<div class="new left">
<img id="img1" src="https://image.freepik.com/free-photo/blue-mountains-famous-tourism-scenery-lijiang_1417-1143.jpg" alt="">
</div>
<div class="new hidden-xs">
<img id="img2" src="https://images.pexels.com/photos/490411/pexels-photo-490411.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
</div>
<div class="new">
<img id="img3" src="https://previews.123rf.com/images/smileus/smileus1505/smileus150500016/40147459-colorful-sunset-scenery-in-rural-landscape-with-a-bench-and-a-path-in-the-foreground-gold-fields-and.jpg" alt="">
</div>
</div>
Try this code
#div::after {
display: table;
content: "";
clear: both;
}
#div img {
float: left;
width: 33.33%;
max-width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="demonstration.css" type="text/css">
<title>Demo</title>
</head>
<body>
<div id="div">
<img id="img1" src="https://image.freepik.com/free-photo/blue-mountains-famous-tourism-scenery-lijiang_1417-1143.jpg" alt="">
<img id="img2" src="https://images.pexels.com/photos/490411/pexels-photo-490411.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
<img id="img3" src="https://previews.123rf.com/images/smileus/smileus1505/smileus150500016/40147459-colorful-sunset-scenery-in-rural-landscape-with-a-bench-and-a-path-in-the-foreground-gold-fields-and.jpg" alt="">
</div>
</body>
</html>
Try this Code::
ul.img {
margin: 0;
padding: 0;
white-space: nowrap;
width: 500px;
overflow-x: auto;
}
ul.img li {
display: inline-block;
width: 200px;
height: 200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="demonstration.css" type="text/css">
</head>
<body>
<ul class="img">
<!-- Inline styles added for demonstration purposes only. -->
<li style="background-color: #000"></li>
<li style="background-color: #cdc"></li>
<li style="background-color: #fed"></li>
</ul>
</body>
</html>
try this code, And modify your image height according to need.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="demonstration.css" type="text/css">
<title>Demo</title>
<style>
#div {
display: flex;
flex-wrap: wrap;
}
#div img{
width: 33.33%;
height: 200px;
}
</style>
</head>
<body>
<div id="div">
<img id="img1" src="https://image.freepik.com/free-photo/blue-mountains-famous-tourism-scenery-lijiang_1417-1143.jpg" alt="">
<img id="img2" src="https://images.pexels.com/photos/490411/pexels-photo-490411.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
<img id="img3" src="https://previews.123rf.com/images/smileus/smileus1505/smileus150500016/40147459-colorful-sunset-scenery-in-rural-landscape-with-a-bench-and-a-path-in-the-foreground-gold-fields-and.jpg" alt="">
</div>
</body>
</html>
The problem is you are using a float for positioning.
Floats will automatically move to a new line when their containers becomes too small.
You could either set the size of the image container to a width of 600px with no resize in which your images would remain in place when the window becomes smaller.
Or you could use the fixed position which is what I would go for.
#img1 {
position: fixed;
width:200px;
left: 0px;
top: 0px;
border: 0px;
padding: 0px;}
#img2 {
position: fixed;
width:200px;
left: 200px;
top: 0px;
border:0px;
padding: 0px;}
#img3 {
position: fixed;
width:200px;
left: 400px;
top: 0px;
border: 0px;
padding: 0px;}
If you dont care about image resize, set the div with a minimum width of a total px sum of the image widths. That way you have less containers.
This question already has answers here:
How do I vertically center text with CSS? [duplicate]
(37 answers)
Closed 6 years ago.
I have a navigation bar which I want it to always stay centered when the window is resized. The bar is on top of a picture which serves as the background of the website.
Here's the code:
<!doctype html>
<html lang="en">
<head>
<style>
body {
font-family: Trebuchet MS;
}
.containermain {
margin: auto;
}
.navibar {
z-index: 1;
position: absolute;
background-color: #000000;
border-radius: 5px;
/*text-align: center;*/
left: 200px;
right: 80px;
top:140px;
width: 870px;
/*max-width: 100%;*/
margin: auto;
}
</style>
</head>
<body style="margin:0px;">
<div class="containermain">
<img class="bg" src="bg.png" alt="background">
</div>
<div class="navibar">
<a class="button btnhome" href="x.html#home" target="_blank">home</a>
<a class="button" href="x.html#portfolio" target="_blank">portfolio</a>
<a class="button" href="x.html#blog" target="_blank">blog</a>
<a class="button" href="x.html#contact" target="_blank">contact</a>
</div>
</body>
</html>
I've tried several approach like "margin: auto", but nothing works, the navi bar is pinned to the place. Please help, thanks in advance!
Navbar is fixed to the position because of position: absolute and left:200px & right: 80px values. Try below snippet.
If you want space on the top, use margin-top: 140px
<!doctype html>
<html lang="en">
<head>
<style>
body {
font-family: Trebuchet MS;
}
.containermain {
margin: auto;
}
.navibar {
z-index: 1;
background-color: #000000;
border-radius: 5px;
width: 870px;
margin: auto;
}
</style>
</head>
<body style="margin:0px;">
<div class="containermain">
<img class="bg" src="bg.png" alt="background">
</div>
<div class="navibar">
<a class="button btnhome" href="x.html#home" target="_blank">home</a>
<a class="button" href="x.html#portfolio" target="_blank">portfolio</a>
<a class="button" href="x.html#blog" target="_blank">blog</a>
<a class="button" href="x.html#contact" target="_blank">contact</a>
</div>
</body>
</html>
Try using flexbox CSS. This is browser dependant though, but so easy in centering content.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I can not see side2.html below the side1.html
page.html should scroll, side1.html and side2.html should be always visible, side1 above side2.
page.html
<!DOCTYPE html>
<html>
<head>
<title>page</title>
<style type="text/css">
<!--
body.container {
width: 100%;
height: auto;
}
.maintext {
float: right;
width: calc(100% - 210px);
}
iframe.side1 {
position: fixed;
float: left;
height: 600px;
width: 200px;
}
iframe.side2 {
position: fixed;
float: left;
top: 300px;
height: 300px;
width: 200px;
}
-->
</style>
</head>
<body>
<a name="topw" id="toppage"></a>
<div class="container">
<div class="maintext">
<a name="dic"></a><h3> Dict</h3><br/>
</div>
<iframe class="side1" src="side1.html" frameborder="0" />
<iframe class="side2" src="side2.html" frameborder="0" />
</div>
</body>
</html>
side1.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a class="menu" target="_parent" href="page.html#dic" title="title" > title </a>
</body>
</html>
side2.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a target="_blank" href="http://www.ubuntu.com" title="org">.org</a>
</body>
</html>
Or could I solve the problem just with div, without iframe. Something like here. But I can not make it work: side1 above side2
Position fixed needs positioned elements top/right/down/left to reference it's offset. float will not work on fixed elements.
I have also change the height and offset of the elements so they will fill the users screen no matter what size it is.
Also as #Sim pointed out iframes are now self closing and should have a proper closing tag.
body.container {
width:100%;
}
.maintext {
min-height:1080px; /*to simulate content*/
width:100%;
box-sizing:border-box;
padding-left:200px;
background:#ddd;
}
.side1,
.side2{
position: fixed;
left:0;
width:200px;
}
iframe.side1 {
top:0;
height:70%;
}
iframe.side2 {
top:70%;
height:30%;
}
<div class="container">
<div class="maintext">
<a name="dic"></a><h3>Middle Div</h3><br/>
</div>
<iframe class="side1" src="side1.html" frameborder="0"></iframe>
<iframe class="side2" src="side2.html" frameborder="0"></iframe>
</div>
you should close your iframes with </iframe>, because they aren't empty elements (to deal with browsers that do not support <iframe>, you could add a text between the opening and the closing tag of the iframe): https://www.w3.org/wiki/HTML/Elements/iframe
use top and left to position absolute when your element is position: fixed
I've modified your code (see comments):
<!DOCTYPE html>
<html>
<head>
<title>page</title>
<style type="text/css">
body.container {
width: 100%;
}
.maintext {
float: right;
width: calc(100% - 210px);
}
iframe.side1 {
position: fixed;
left: 0; /* use absolute positions when position fixed, not float */
top: 0;
height: 300px; /* 300px is enough, else it is behind your second iframe*/
width: 200px;
}
iframe.side2 {
position: fixed;
left: 0;
top: 300px;
height: 300px;
width: 200px;
}
</style>
</head>
<body>
<a name="topw" id="toppage"></a>
<div class="container">
<div class="maintext">
<a name="dic"></a><h3> Dict</h3><br/>
</div>
<!-- always add a closing tag to your iframes -->
<iframe class="side1" src="side1.html" frameborder="0" ></iframe>
<iframe class="side2" src="side2.html" frameborder="0" ></iframe>
</div>
</body>
</html>
I hope that solve your problem...
I have a simple HTML page in which i want to align Div vertically middle of another div. There is one way of using positioning concept. But i want to use vertical-align property.
Below is my html and css files.
What i am trying to do is to place <div class='plink'> vertically centered which is inside of
<div class='tiles'>
.plink{
height: 100%;
vertical-align: middle;
}
is also not working
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="/favicon.icon" type="image/jpeg">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Some title</title>
</head>
<body>
<main>
<h1>Some heading</h1>
<hr>
<div id="tilescontainer">
<div class="tiles" id="tile_1">
<div class="plink">some text</div>
</div>
<div class="tiles" id="tile_2">
<div class="plink">some text</div>
</div>
<br>
<div class="tiles" id="tile_3">
<div class="plink">some text</div>
</div>
<div class="tiles" id="tile_4">
<div class="plink">some text</div>
</div>
</div>
</main>
</body>
</html>
style.css
/*Main style sheet*/
main{
height: 600px;text-align: center;
}
a{
text-decoration: none;
}
/*tilescontainer*/
#tilescontainer{
text-align: center;position: relative;top: 10%;
}
/*tilescontainer*/
/*tiles*/
.tiles{
display: inline-block;height: 200px;width: 200px;box-shadow: 2px 2px 2px #808080;margin: 5px;text-align: center;vertical-align: middle;
}
/*tile_1*/
#tile_1{
background-color: #ff8000;
}
#tile_1:hover{
background-color: #808080;
}
/*tile_1*/
/**/
#tile_2{
background-color: #00aced;
}
#tile_2:hover{
background-color: #808080;
}
/**/
/**/
#tile_3{
background-color: #82858a;
}
#tile_3:hover{
background-color: #808080;
}
/**/
#tile_4{
background-color: ;
}
#tile_4:hover{
background-color: #808080;
}
span{
border: 2px solid;
}
/*tiles*/
Here at w3schools example is give i tried this link
Have you tried working with the table display modes?
When I am doing css styling I find vertical alignment to work well with these technique.
Example:
.title{
display: table;
}
.plink{
display:table-cell;
height: 100%;
vertical-align: middle;
}
I think what you want to do with the vertical-align property is not what it was designed to do and therefor not possible. This article explains why:
Vertical Alignment