How do I vertically center an hr element?
I've tried to place the element in some div elements...
<div class="table">
<div class="table-cell"><hr /></div>
</div>
<div class="table">
<div class="table-cell">Some text Here!</div>
</div>
<div class="table">
<div class="table-cell"><hr /></div>
</div>
I've left out that I am using bootstrap and have these three div elements with the class of table in the same row using the col-size-number format.
So I'm looking for inline HR element Some Text inline HR element
--------------SOME TEXT--------------
Thank you again css guru masters!
For a simple, generic way to vertically center an hr element:
html:
<div class="container">
<hr />
</div>
css:
.container {
display: flex;
align-items: center;
}
.container hr {
width: 100%;
}
The hr element needs a width given to it (or flex-grow), otherwise it will be only a dot in the center of the container.
.container {
display: flex;
align-items: center;
height: 100px;
background: yellow;
}
.container hr {
flex-grow: 1;
}
<div class="container">
<hr />
</div>
To anyone who's stumbled upon this in the future, I have updated the answer to what I feel is a more modern, efficient approach using Flexbox
HTML:
<div class="title">
<hr />
<h3>Some text</h3>
<hr />
</div>
CSS:
.title {
display:flex;
flex-flow:row;
justify-content:center;
align-items:center;
}
hr {
flex:1;
}
h3 {
padding:0px 48px;
}
DEMO HERE
I used the following solution in my css, margin the element to the center on every device
CSS:
margin: 0 auto;
Related
This may be very naive but I am struggling to make the div children of a parent div element horizontal
I am trying to make a header, here is my code
.logoImg {
width: 50px;
height: 50px;
}
.header {
display: flex;
justify-content: center;
float: left;
}
.logo {
margin: 0 auto;
display: flex;
}
.addressDropDown {
margin: 0 auto;
display: flex;
}
<header>
<div className="logo">
<img className="logoImg" src='https://via.placeholder.com/100x100' alt="" />
</div>
<div className="addressDropDown">
<p>Dropdown</p>
</div>
<div className="searchBar">
<input type="text" placeholder="What are you looking for?" />
</div>
<div className="languageSetting">
<p>language</p>
</div>
<div className="singInBtn">
<p>signIn</p>
</div>
<div className="cartBtn">
<p>Cart</p>
</div>
</header>
<body>
Body of the page
</body>
I would really appreciate it if someone can point out my mistake or give me some hints
Thank you
Just a small typo in your CSS code. The selector should be header (this selects all header elements) and not .header (this selects all element with the class "header")
Your mistake is, that you try to change the style of .header. However to access the <header> element you have to remove the dot:
header {
...
}
Below are the div elements I am trying to place it side by side. Is it possible?
<div style="padding-left:10px">
<h4 class="line">{sev_pas}</h4>
</div>
<div style="padding-left:10px">
<div>sdfds</div>
Of course you can by using display: inline-block property. Just make sure what you are doing
div {
display: inline-block;
}
<div style="padding-left:10px">
<h4 class="line">{sev_pas}</h4>
</div>
<div style="padding-left:10px">
<div>sdfds</div>
SIMPLE CSS CAN HELP :
div{
width : 150px;
height: 150px;
display:inline-block;
}
<div style='background: red'></div>
<div style='background: blue'></div>
<div style='background: orange'></div>
<div style='background: green'></div>
Using text in div element it's not best practice! it's better to put your text in p or span tag.
also you can use "display:flex" for div element so it's better to write something like below code:
.container{
display: flex;
flex-direction:row;
gap: 10px;
align-item:center;
}
.line{
margin: 0
}
<div class="container">
<h4 class ="line" >{sev_pas}</h4>
<span>sdfds</span>
</div>
You can use display: inline-block for set div or any other elements.
div{
display:inline-block;
}
h2{
background:orange;
color:#fff;
}
<div style="padding-left:10px">
<h2>DIV 2</h2>
</div>
<div style="padding-left:10px">
<h2>DIV 1</h2>
</div>
Else there are also other methods like using display: flex or display: grid etc.
Just use display: inline-block;
.first-div{
display: inline-block;
}
.second-div{
display:inline-block;
}
<div class="first-div" style = "padding-left:10px">
<h4 class ="line" >ok</h4>
</div>
<div class="second-div" style= "padding-left:10px"> sdfds</div>
So I was trying achieve this logo but the text wont go in middle.
I have tried vertical align and line-height but no luck. Hope someone helps :)
Code:
<div>
<div id="logo">
<div id=""></div>
<p>title<br>
text</p>
</div>
<div id="">
</div>
</div>
CSS
#header {height: 100px; background: #fff}
#logo div {background: url(/img/logo.png) center/contain no-repeat; width: 70px; height: 70px; float: left}
#logo p {vertical-align: middle}
try this css on the container element
display: flex;
align-items: center;
justify-content: center;
If you're using html and css, just make sure that both the text and the image are in the same div.
You can also follow this tutorial if that can make it easier: https://css-tricks.com/text-blocks-over-image/
Hope this works .
simple example
<div>
<img style="vertical-align:middle" src="https://placehold.it/60x60">
<span >verticle text.</span>
</div>
There are a few methods.
One of them is:
#parent {display: table;}
#child {
display: table-cell;
vertical-align: middle;
}
Try with text:
transform: translate(12px, 76px); //adjust it to fit your needs
Well flexbox is the easiest way to go around
<div id='foo'>
<div id='logo'><img src='path.png'></div>
<div id='text'>Title HEre</div>
</div>
CSS:
#foo {
display:flex;
align-items:center;
}
I'm trying to make the following pattern in HTML:
CellA CellB
CellC
CellD CellE
CellF
I'm trying to use a mixture of divs and spans to do this. I make CellC inside of a div since browsers always place line breaks before and after the div (Source). I also give this div the CSS property float: right so that it will appear to the right (like shown above). Making it float right is working, but I think by doing this I'm removing the default property of the div, which I believe is display: block, which puts in the line breaks. Even if I add this property in manually, it has no affect.
Here is the code I'm trying out (Along with a fiddle):
HTML
<div>CellA
<span class="floatRight">CellB</span>
</div>
<div class="both">
CellC
</div>
<div>CellD
<span class="floatRight">CellE</span>
</div>
<div class="both">
CellF
</div>
CSS
.floatRight { float:right;}
.both {float: right; display: block;}
The code above will cause my output to look like this:
CellA CellB
CellD CellECellC
CellF
Add following style to both class
.both {
float: right;
display: block;
width: 100%;
text-align: right;
}
Adding another solution to your problem, you can use flexbox to do this.
Try this:
html:
<div class="flex-container">
<div class="item">CellA</div>
<div class="item">CellB</div>
<div class="item">CellC</div>
<div class="item">CellD</div>
<div class="item">CellE</div>
<div class="item">CellF</div>
</div>
css:
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
.item:nth-child(3n) {
width: 100%;
text-align: right;
color: red;
}
Demo
But if you can't use flexbox, the #Jaspreet Singh answers its correct.
If you can change the HTML structure, then this approach will be easy for you:
HTML
<div class="clearfix">
<div class="left">
Cell A
</div>
<div class="right">
<div>
Cell B
</div>
<div>
Cell C
</div>
</div>
</div>
<div class="clearfix">
<div class="left">
Cell D
</div>
<div class="right">
<div>
Cell E
</div>
<div>
Cell F
</div>
</div>
</div>
CSS:
.right {
float: right;
}
.left {
float: left;
}
.clearfix:after {
content: "";
clear: both;
display: block
}
Demo: https://jsfiddle.net/j0eqtzn2/2/
Why are you using float? If there is no "good" reason to use float, because float removes the element from the flow of the design.
Try using display inline-block instead.
<html>
<head>
<title>foo</title>
<style>
.left {
width: 45%;
display: inline-block;
background-color: #0ff;
}
.right {
width: 45%;
display: inline-block;
background-color: #f00;
}
</style>
</head>
<body>
<div>
<div class="left">CellA</div> <div class="right">CellB</div>
<div class="left"></div> <div class="right">CellC</div>
<div class="left">CellD</div> <div class="right">CellE</div>
<div class="left"></div> <div class="right">CellF</div>
</div>
</body>
</html>
if you use DL here instead of DIV then it will be easy for you. because it's look like title and description
Here is the demo
[check demo here][1]
[1]: https://jsfiddle.net/j0eqtzn2/6/
I have very specific request for centering elements so I decided to try flexbox.
The request is following. I have 3 elements stacked vertically.
Header, content and footer.
A special condition is there to have middle element "content" centered on page (vertically and horizontaly) and header with footer stick on it from top and down. It should works with window resize.
There is hard-coded solution for better demonstration.
http://codepen.io/anon/pen/oXjVmE
I tried to solve that with flex box, but only what I get is that all 3 elements are centered together.
I am looking how to tell flex-box "First and last element should be same and max possible height"
http://codepen.io/anon/pen/GJpeYY
html
<div class="wrapper">
<div class="header">
<h1>Header</h1>
<h2>Subheader</h2>
<p>Text</p>
</div>
<div class="centered">
Centered Text
</div>
<div class="footer">
Some tiny footer
</div>
</div>
css
.wrapper {
height:500px;
background-color:lightgreen;
.display(flex);
.flex-direction(column);
.align-items(center);
.justify-content(center);
text-align: center;
}
.header {
background-color:gold;
}
.centered {
height: 50px;
line-height: 50px;
background-color:deepskyblue;
}
.footer {
background-color:tomato;
}
You can achieve that result by simply using flex: inline-flex, and adding an outer container, like in the following
running demo
I've made the centered text content editable, so edit it and see that header and footer stretches themselves along with it.
.container {
text-align: center;
background-color: lightgreen;
}
.wrapper {
height: 500px;
display: inline-flex;
flex-direction: column;
justify-content: center;
}
.header {
background-color: gold;
}
.centered {
height: 50px;
line-height: 50px;
background-color: deepskyblue;
}
.footer {
background-color: tomato;
}
<div class="container">
<div class="wrapper">
<div class="header">
<h1>Header</h1>
<h2>Subheader</h2>
<p>Text</p>
</div>
<div class="centered" contentEditable="true">
Centered Text - I'm editable, so... EDIT ME !!!!
</div>
<div class="footer">
Some tiny footer
</div>
</div>
</div>
Also FlexyBoxes tool is worthy a try for this kind of things.
remove wraper height:500px; and add height:100vh;
it is viewport height and i hope you will get what you want.