There is the following HTML code:
<div class="row">
<label class="resume-form-label" for="ResumeForm_languages">Languages</label><textarea class="resume-form-input" name="ResumeForm[languages]" id="ResumeForm_languages"></textarea></div>
And the following styles:
.row
{
margin: 5px 0;
}
.resume-form-label {
display: inline-block;
width:100px;
background: yellow;
}
.resume-form-input {
width:300px;
}
.row {
vertical-align:middle;
}
I need to have label and div aligned by vertical. How can I do it? Now it doesn't work.
like this: http://jsfiddle.net/matias/BGwBp/
CSS:
.row
{
margin: 5px 0;
}
.resume-form-label {
display: inline-block;
width:100px;
background: yellow;
vertical-align: middle;
}
.resume-form-input {
width:300px;
vertical-align:middle;
}
Related
Here is my code, I try to make both of my p and before element vertical-aligin in the middle but all failed.
Here is my sass code:
p {
/*whatever*/
&.subtitle {
vertical-align: middle;
color: $theme-blue;
font-size: 1.4rem;
&:before {
display: inline-block;
transform: translateX(-$p-padding);
content: '';
height: 50px;
width: 5px;
background-color: $theme-blue;
}
}
}
can someone help me to do them? Thanks.
btw, is that only block can makes the before sudeo-element show?
For vertical alignment you can try display:table and display:table-cell property as,
Check this fiddle here
Your Sample HTML will be,
<div class="subtitle">
<div class="text">
<p>Abstract</p>
</div>
</div>
Your Sample CSS will be,
.subtitle {
width:100%;
height: 50px;
display: table;
background:#FFF
}
.text {
display: table-cell;
vertical-align: middle;
}
p {
display: block;
text-align:left;
color: #111111;
margin: 0px;
position:relative;
padding-left:20px;
}
.subtitle:before {
content: '';
display:block;
position:absolute;
height: 50px;
width: 5px;
background-color: blue;
}
I'm trying to create an upload layout that contains a box with a row inside of it. The row has two buttons (with inputs wrapped inside them) and one h3. I cannot get them to stay on the same height. The following code illustrates this:
HTML
<div id="mi-wrap">
<h1>Title</h1>
<div id="main-wrap">
<div id="inner-wrap">
<div id="wide-bar">
<button id="upload-button">
<input type="file" id="upload" value="PDF"/>
</button>
<h3 id="file-preview"><i class="fa fa-arrow-left"></i>Upload je bestand</h3>
<button id="send-button" type="submit" name="search-button">
</button>
</div>
</div>
</div>
</div>
CSS:
#mi-wrap {
width:100%;
margin:0 auto 0;
height:200px;
}
#main-wrap {
background-color:blue;
width:90%;
margin:0 auto 0;
height:100%;
}
#inner-wrap {
width:100%;
height:100%;
display:table;
}
#wide-bar {
height:60px;
}
#wide-bar button, #wide-bar h3 {
background-color: green;
height:60px;
display:inline-block;
}
#wide-bar button {
width:25px;
}
#wide-bar button input {
display:none;
}
#wide-bar h3 {
width:50%;
}
The code is not finished (i.e. it is not exactly the same as my own), but it does illustrate the problem. Also in this jsFiddle
You need to put another display, as inline-block combined with vertical-align
#wide-bar h3 {
width:50%;
display: inline-block;
vertical-align:top;
}
See it working:
https://jsfiddle.net/89u30vhx/1/
try this way
#wide-bar button, #wide-bar h3 {
background-color: green;
border: 0 none;
/*display: table-cell;*/ /*Remove this property*/
float: left;/*Add this property*/
height: 60px;
margin: 0;
padding: 0;
}
This will do:
#wide-bar {
vertical-align: middle;
max-height:60px;
display:table;
}
#wide-bar button, #wide-bar h3 {
margin:0;
padding:0;
background-color: green;
display:table-cell
}
#wide-bar button {
width:25px;
height: 60px;
}
Change your css as follows:
#wide-bar {
height: 60px;
}
#wide-bar button, #wide-bar h3 {
margin: 0;
padding: 0;
background-color: green;
height: 60px;
display: inline-block;
float: left;
}
JSfiddle demo
I am having trouble creating a header with left, right and centered elements - I keep trying but i am unable to get the elements positioned in that specific layout with the title being centered at all times
Can anybody help? I feel that I am close but i can't get it to work!
CODE HERE: https://jsfiddle.net/4a25nqb4/
HTML:
<div class="container">
<div class="top">
<div id="social">
<span class="fa fa-facebook"></span>
<span class="fa fa-instagram"></span>
<span class="fa fa-youtube"></span>
</div>
<p id="website">www.AlmostFreeFurniture.com</p>
<h1 id="title">Almost Free Furniture</h1>
</div>
</div>
CSS:
* {
margin:0 auto;
padding:0px;
}
.top {
height: 40px;
background-color:black;
color:red;
margin-top:4px solid orange;
margin-top:10px;
display: table;
width: 100%;
text-align:center;
}
#social, #website, #title {
display:inline-block;
vertical-align: top;
}
#social {
float:right;
}
#website {
float:left;
}
#title {
text-align: center;
}
The floats effect the amount of available area to center in. Because the item on the left is larger then the right, the center between them is closer to the right. If you'll position the left and right items absolutely, the centering mechanism will ignore them (fiddle):
#social {
position: absolute;
right: 0;
}
#website {
position: absolute;
left: 0;
}
I would use display: flex instead of display: table, and then you can push the #social over to the right with order:
* {
margin:0 auto;
padding:0px;
}
.top {
height: 40px;
background-color:black;
color:red;
margin-top:4px solid orange;
margin-top:10px;
display: -webkit-flex;
display: flex;
width: 100%;
text-align:center;
}
#social, #website, #title {
-webkit-flex: 1;
flex: 1;
vertical-align: top;
}
#website { overflow-x: hidden; }
#social {
text-align: right;
-webkit-order: 1;
order: 1;
}
#title {
text-align: center;
}
https://jsfiddle.net/4a25nqb4/
To give #title more room, you can either give it a flex: 2 or something like flex-basis: 50% or thereabouts.
Set width of this elements to 33.33%
#social, #website, #title {
display:inline-block;
vertical-align: top;
width: 33.33%;
}
Next give text-align for elements left, center and right.
I have a navigation inside which I have two divs, one for the logo and the other for menu. Logo div was floated to left. So, it's parent's height is now the same as the logo div. But, the floated menu div sits at the top. I want to align it in the middle. How can I do the same? Please help me...
My code is given below...
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="StyleSheet.css" rel="stylesheet" />
</head>
<body>
<div class="navigation clearfix">
<div class="logo">
<img src="logo.png" />
</div>
<div class="navigation-menu">
<a>HOME</a>
<a>HOME</a>
<a>HOME</a>
<a>HOME</a>
<a>HOME</a>
</div>
</div>
<script src="JavaScript.js"></script>
</body>
</html>
CSS
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
p {
margin: 0;
}
img {
display: block;
}
.navigation {
background-color: yellow;
}
.logo {
float:left;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.navigation-menu {
float:right;
background-color:red;
}
And, here's the fiddle...
http://jsfiddle.net/ZghVk/
Without defining a fixed height, you can change your layout to use display:table to facilitate easier vertical alignment.
Try changing your CSS to:
Demo Fiddle
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
p {
margin: 0;
}
img {
display: block;
}
.navigation {
background-color: yellow;
display:table;
width:100%;
}
.logo {
display:table-cell;
}
.navigation-menu {
text-align:left;
display:table-cell;
text-align:right;
vertical-align:middle;
}
.navigation-menu a{
background-color:red;
float:right;
padding:0 5px;
}
You can set the line-height:
JSFiddle
.navigation-menu {
float:right;
background-color:red;
line-height:120px;
}
This is what you have to do
.navigation-menu {
border:1px solid black;
background-color:red;
margin-left:40px;
}
.navigation-menu a{
margin-left:20px;
}
you are trying to ".navigation-menu" you should use for "a" anchor tag
Try this:
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
p {
margin: 0;
}
img {
display: block;
}
.navigation {
background-color: yellow;
display:table;
width:100%;
}
.logo {
display:table-cell;
}
.navigation-menu {
text-align:left;
display:table-cell;
text-align:right;
vertical-align:middle;
}
.navigation-menu a{
background-color:red;
float:right;
padding:0 5px;
}
Hope it helps! :)
I'm trying to make 2 divs appear on separate lines within an outside div. Right now I have display:inline-block set for both of them, but I'm not sure how to change this to make them appear on separate lines.
Here is what my code looks right now, I would like John Doe and 100 to appear on separate lines within the leader div:
http://jsfiddle.net/ZnuPR/
HTML
<ul>
<li class="leader">
<div class="ranking">1</div>
<div class="name">John Doe</div>
<div class="score">100</div>
</li>
</ul>
CSS
.leader {
border: 1px solid;
background-color: #E6E6E6;
display: inline-block;
width: 400px;
margin: 2px;
padding: 2px;
background-repeat: no-repeat;
height: 75px;
}
.ranking {
display: inline-block;
margin:2px;
padding:2px;
width:50px;
height:65px;
background-color:green;
color:white;
}
.name {
display: inline-block;
}
.score {
display: inline-block;
}
You could simply float .ranking and then leave .name and .score as display: block.
http://jsfiddle.net/ZnuPR/7/
.ranking {
/* ... */
float: left;
}
The fastest solution is to set the ranking to "float:left;" and the name and score to "display:block;". Block level elements span 100% by default which will make sure the 2 elements are on seperate lines.
.leader {
border: 1px solid;
background-color: #E6E6E6;
display: inline-block;
width: 400px;
margin: 2px;
padding: 2px;
background-repeat: no-repeat;
height: 75px;
}
.ranking {
float:left;
margin:2px;
padding:2px;
width:50px;
height:65px;
background-color:green;
color:white;
}
.name {
display: block;
}
.score {
display: block;
}
http://jsfiddle.net/ZnuPR/2/
I think this is what you mean:
http://jsfiddle.net/ZnuPR/6/
Don't use inline-block and remove the height from the container, it will automatically adjust to the height it needs to be.
http://jsfiddle.net/ZnuPR/8/
Added a .details wrapper and some floats.
.ranking {
float:left; /* Floating */
margin:2px;
padding:2px;
width:50px;
height:65px;
background-color:green;
color:white;
}
.details {
float:left; /* floating */
}
.name {
display: block; /* Changed to block */
}
.score {
display: inline-block;
}
<ul>
<li class="leader">
<div class="ranking">1</div>
<div class="details">
<div class="name">John Doe</div>
<div class="score">100</div>
</div><!-- end details wrapper-->
</li>
</ul>
I think this could be useful:
http://jsfiddle.net/ZnuPR/10/
.leader {
border: 1px solid;
background-color: #E6E6E6;
display: inline-block;
width: 400px;
margin: 2px;
padding: 2px;
background-repeat: no-repeat;
}
.ranking {
width: 100%;
margin:2px;
padding:2px;
width:50px;
height:65px;
background-color:green;
color:white;
}
.name {
width: 100%;
}
.score {
width: 100%;
}
This is what I did:
CSS
.leader {
border: 1px solid;
background-color: #E6E6E6;
display: inline-block;
width: 400px;
margin: 2px;
padding: 2px;
background-repeat: no-repeat;
}
.ranking {
display: inline-block;
margin:2px;
padding:2px;
width:50px;
height:65px;
background-color:green;
color:white;
}
I got rid of display: inline-block and height