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
Related
My h1 tag shifts the entire div down when I have 2 or more divs next to each other enclosed in another div.
How do I make it so that I can add my text without the divs shifting.
I tried to add text onto a single div enclosed by another div and it only seems to be wrong when there are 2 or more divs next to each other inside a div. Any help is appreciated. This is how it looks like right now but
This is how I want it to look but with the text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link href="positioningTrial.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="seperate">
<div class="inside">
<h1>hello</h1>
</div>
<div class="inside">
</div>
</div>
<!-- ------------------------------------------------------------------------------------------- -->
<div id="main-cont">
<div class="row">
<div class="left">
<h1>hello</h1>
</div>
<div class="middle"></div>
<div class="right"></div>
</div>
<div class="row">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
<div class="row">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
<div class="row">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
</div>
</body>
</html>
h1,
p {
padding: 0;
margin: 0;
}
#seperate {
border: 1px solid red;
height: 10vw;
width: 400px;
text-align: center;
margin-bottom: 5px;
}
.inside {
display: inline-block;
border: 1px solid red;
height: 100%;
width: 40%;
}
/* ---------------------------------------------- */
#main-cont {
width: 100vw;
height: 100vh;
border: 3px solid blue;
text-align: center;
}
.row {
width: 100%;
height: 20%;
border: 3px solid #ff0000;
}
.left,
.middle,
.right {
display: inline-block;
width: 20%;
height: 100%;
border: 2px solid black;
}
.left {
}
.middle {
width: 40%;
}
.right {
}
/* --------------------------------------------- */
[1]: https://i.stack.imgur.com/nGHtm.jpg
I think there might be some crossed wires with how the page layout works.
Can you make a simplified version in jsFiddle like this: https://jsfiddle.net/sheriffderek/hupdmg3q/ or something?
It's hard to tell what you want to happen from the image you provide.
How do I make it so that I can add my text without the divs shifting
All of the block-level elements are just full-width boxes:
<header>
<h1>Heading example</h1>
<div>Example div</div>
</header>
So, their existence takes up space - and pushes each other down the page.
Your CSS looks like you are kinda fighting the nature of how the pages work.
Here's some other things to think about: https://jsfiddle.net/sheriffderek/7j3f2chw/
I have some simple HTML and CSS written. I'd like to get a list of buttons to the right side of an image.
I've tried using float and display: inline
<html>
<head>
<title>title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<section class="main">
<div class="container">
<div id="image">
<img src="img/placeholder.png" />
</div>
<div id="controls-container">
<div class="controls">Start</div>
<div class="controls">Right</div>
<div class="controls">Back</div>
<div class="controls">Down</div>
</div>
</div>
</section>
<div class="footer-container">
<footer>
<h5>footer</h5>
</footer>
</div>
</body>
</html>
.main{
background: yellow;
}
#image img {
width: 1000px;
height: 600px;
}
#controls-container{
background: pink;
}
.footer-container {
clear: both;
text-align: center;
margin-top: 5em;
margin-bottom: 2em;
}
I've highlighted the container for everything but the footer as yellow. The container holding the buttons are pink. I've done this to help me understand what's happening to the containers as I test things out.
For float, I've tried floating the buttons-container to the right. This results in the buttons going to the right of the page, and it seems to somehow disassociate itself from the main container as it is no longer highlighted in yellow.
I've also tried floating the img to the left. This seems to be the best help so far, except that the yellow background has disappeared. What happened to the rest of my container? I've tried using margin-top to move the buttons down towards the middle of the image but both the image and the button's margins seem to be altered.
Is there a better way to do this? Thank you.
I suggest you use display: flex; to do this. It's much easier to get alignment done with flex This is a sample code.
I have added align-items: flex-start to your controls-container so that it will only take up the space from the top. If you want the container to take the full height along with your image-container feel free to remove that code. Also I have removed your ids and used classes to reference the styles and I would advise you to do the same. Hope it helps you.
HTML
<div class="d-flex flex-column">
<div class="container main">
<div class="image-container">
<img src="img/placeholder.png" />
</div>
<div class="controls-container">
<div class="controls">Start</div>
<div class="controls">Right</div>
<div class="controls">Back</div>
<div class="controls">Down</div>
</div>
</div>
<div class="footer">
<h5>
Footer
</h5>
</div>
</div>
CSS
.d-flex {
display: flex;
}
.flex-column {
flex-direction: column;
}
.container {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.main {
background: yellow;
}
.image-container {
width: 1000px;
height: 600px;
}
.controls-container {
display: flex;
flex-direction: row;
background: pink;
}
.footer {
clear: both;
text-align: center;
margin-top: 5em;
margin-bottom: 2em;
}
JS Fiddle Link: https://jsfiddle.net/SJ_KIllshot/fq8t3ndw/
The other way around is to use position.I have just tweaked your code, below is the snippet please have a look at it.
.main {
background: yellow;
position: relative
}
#image img {
width: 1000px;
height: 600px;
}
#controls-container {
background: pink;
position: absolute;
right: 0px;
top: 0px;
}
.controls {
display: inline;
}
.footer-container {
clear: both;
text-align: center;
margin-top: 5em;
margin-bottom: 2em;
}
<html>
<head>
<title>title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<section class="main">
<div class="container">
<div id="image">
<img src="img/placeholder.png" />
</div>
<div id="controls-container">
<div class="controls">Start</div>
<div class="controls">Right</div>
<div class="controls">Back</div>
<div class="controls">Down</div>
</div>
</div>
</section>
<div class="footer-container">
<footer>
<h5>footer</h5>
</footer>
</div>
</body>
</html>
This question already has answers here:
Center image using text-align center?
(28 answers)
How to center image horizontally within a div element?
(23 answers)
Closed 4 years ago.
I was told to put a working code up that's why I have so much code up here but the part I am trying to focus on is aligning the top "resumania" logo in the center. When I put align: center; or text-align: center; it won't align. The class I am using for that is "logo." What am I doing wrong ??
<!DOCTYPE html>
<html>
<body>
<link href="https://fonts.googleapis.com/css?family=Ultra" rel="stylesheet">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!--NEED HELP RIGHT HERE-->
</head>
<div class="box">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<img src="/Users/mtaslagyan/Desktop/resumania/images/cartoonmanquestion.JPG" alt="cartoon guy with a question mark above him">
</div>
<div class="col-md-8">
<h1 class="heading" align="center">Welcome to Resumania!</h1>
</div>
</div>
</div>
</div>
<a href=/Users/mtaslagyan/Desktop/resumania/majorlinks/testpage.html>check this out</a>
</body>
<style>
a {
color: #2d2d2d;
}
.logo{
width:200px;
border-radius:10px;
text-align: center;
}
.box{
width:100%;
background-color:#f6f6f6;
}
.heading{
color:navy;
padding: 80px 100px 0px 0px;
font-family: 'Ultra', serif;
}
</style>
</html>
One way is to wrap the <a> with a block element, like a <div> then you can use text-align:center
a {
color: #2d2d2d;
}
.wrapper {
text-align: center;
}
.logo {
width: 200px;
border-radius: 10px;
}
.box {
width: 100%;
background-color: #f6f6f6;
}
.heading {
color: navy;
padding: 80px 100px 0px 0px;
font-family: 'Ultra', serif;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="wrapper">
</div>
<div class="box">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<img src="/Users/mtaslagyan/Desktop/resumania/images/cartoonmanquestion.JPG" alt="cartoon guy with a question mark above him">
</div>
<div class="col-md-8">
<h1 class="heading" align="center">Welcome to Resumania!</h1>
</div>
</div>
</div>
</div>
You can give the css property display:flex; align-items:center to your parent class (ie) for class "box"
try this.if you give the class logo for the a tag i mean the parent of your logo image that will be much better otherwise the a tag will be full width.
.logo {
width: 200px;
border-radius: 10px;
margin: 0 auto;
display: block;
}
You may refer to this jsfiddle.
enter code here
I am trying to adjust the divs in my application in a way that they remain beside each other in all condition, that is, Currently I am facing a problem that , when i decrease the width of the device the div start to come below the other div while with the device that have higher width have no issues. I have used viewport rendering but still there is no effect on the same .
Here id the code :
HTML:
<HTML>
<head>
<meta charset="ISO-8859-1">
<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Comment</title>
<link rel="stylesheet" type="text/css" href="Comment.css">
<script src="js/angular-1.0.7.js"></script>
<script src="js/Myangular.js"></script>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<div class="main">
<div class="imageIcon"><img style="height:30px;width:30px;"src="images/male-shadow-circle-512.png" alt="UserMale" /></div>
<div class="contentDiv">
<div class="nameAndId">Name of the persion along with some IDS</div>
<div class="commentDetails">this is the conetent of the main div where we can put the graphics</div>
<div class="updateTime">Some time ago .</div>
</div>
</div>
</body>
</html>
CSS:
#CHARSET "ISO-8859-1";
body
{
margin : 0px;
padding: 0px;
}
.main
{
margin-top:10px;
}
.imageIcon
{
display:inline-block;
float:left;
margin-left:18px;
background-color: green;
}
.contentDiv
{
display:inline-block;
float:left;
margin-left:12px;
margin-right:10px;
background-color: blue;
}
.nameAndId
{
background-color: aqua;
}
.commentDetails
{
margin-top:8px;
background-color: red;
}
.updateTime
{
float:right;
margin-top: 16px;
background:silver;
}
Fiddle link :
http://jsfiddle.net/tvaibhav/rta9LLfw/
You could use display: table on .main and display: table-cell on .imageIcon and .contentDiv to prevent that. Instead of margin, you could use border-spacing property on parent(.main).
Play Ground
#CHARSET"ISO-8859-1";
body {
margin: 0px;
padding: 0px;
}
.main {
display: table;
border-spacing: 10px;
}
.imageIcon {
display: table-cell;
vertical-align: top;
}
.contentDiv {
display: table-cell;
vertical-align: middle;
background-color: blue;
}
.nameAndId {
background-color: aqua;
}
.commentDetails {
margin-top: 8px;
background-color: red;
}
.updateTime {
float: right;
margin-top: 16px;
background: silver;
}
<body>
<div class="main">
<div class="imageIcon">
<img style="height:30px;width:30px;" src="http://www.lorempixel.com/30/30" alt="UserMale" />
</div>
<div class="contentDiv">
<div class="nameAndId">Name of the persion along with some IDS</div>
<div class="commentDetails">this is the conetent of the main div where we can put the graphics</div>
<div class="updateTime">Some time ago .</div>
</div>
</div>
</body>
You can simply use the display: flex; property with your main div:
.main {
margin-top:10px;
display: flex;
display: -webkit-flex;
}
Here's a Demo fiddle, that works fine with all widths.
Take a look at W3School Tutorial here and try it here.
I have some simple css that is meant to display a paragraph element in the middle(vertically) of its parents div.
My Problem: The paragraph element does't vertically align to the middle it always sits at the top. This solution only has to work on Safari(iPad's Safari version specifically).
Do you know how to get my paragraph element to vertically align to the middle?
<html>
<head>
<style type="text/css">
<!--
.ButtonBox {
cursor: pointer;
vertical-align: middle;
text-align: center;
background-color: blue;
height: 200px;
}
.buttonBoxContainer {
cursor: pointer;
}
-->
</style>
</head>
<body>
<div class="ButtonBox">
<p class="buttonBoxContainer">Press Me</p>
</div>
</body>
</html>
If your box will always have a static height, you can use line-height to center the paragraph element, as shown here.
If it won't be static, the best solution (In my experience) is to use javascript.
<html>
<head>
<style>
.ButtonBox {
cursor: pointer;
vertical-align: middle;
text-align: center;
background-color: blue;
height: 200px;
color: #fff;
}
.buttonBoxContainer {
cursor: pointer;
line-height: 200px;
}
</style>
</head>
<body>
<div class="ButtonBox">
<p class="buttonBoxContainer">Press Me</p>
</div>
</body>
</html>