I have the following:
#container {
background-color: #ddd;
width:150px;
height: 150px;
display: grid;
vertical-align: middle; text-align: center;
align-items: center;
}
#container:focus {
align-items: center;
vertical-align: middle;
text-align: center;
}
<div id='container' contenteditable="true">
</div>
I'd like to have the cursor initialise in the center of the div container. At present, it starts at the top (Chrome) or bottom (Firefox). It centralises as soon as I start typing.
How do I initialise the vertical alignment of contenteditable div cursor with css?
Use display:table-cell;, it should work better than grid (seems to work only with Chrome)
#container {
background-color: #ddd;
width: 150px;
height: 150px;
text-align:center;
display:table-cell;
vertical-align:middle;
}
<div id='container' contenteditable="true">
</div>
A hacky idea to make it work with Firefox where you need the div to be empty:
#container {
background-color: #ddd;
width: 150px;
height: 150px;
text-align:center;
display:table-cell;
vertical-align:middle;
}
#container:empty {
line-height:150px;
padding-left:75px;
box-sizing:border-box;
text-align:left;
}
<div id='container' contenteditable="true"></div>
This solution is very short.
*:focus {
outline: none;
}
.div{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
width: 300px;
height: 300px;
background: orange;
}
.div:empty{
line-height:300px;
}
<div class="div" placeholder="Type something" contenteditable></div>
Related
I am using this to center things in CSS:
.testclass {
display: flex;
justify-content: center;
}
but when i want to scale elements using width and height, it doesn't work and my elements are not centered.
Like this:
.testclass {
display: flex;
justify-content: center;
width: 200px;
height: 200px;
}
What's the problem?
This looks like the expected behavior.
Remember that in this case justify-content: center; centers what is inside the container - not the container itself.
EDIT:
I added margin: 0 auto; to center the container.
#container1 {
display: flex;
justify-content: center;
border: 1px solid red;
}
#container1 > div {
border: 1px solid blue;
background: yellow;
}
#container2 {
display: flex;
justify-content: center;
border: 1px solid red;
width: 200px;
height: 200px;
margin: 0 auto;
}
#container2 > div {
border: 1px solid blue;
background: yellow;
}
<div id="container1">
<div>test 1</div>
</div>
<div id="container2">
<div>test 2</div>
</div>
display: flex; and justify-content: center;
works for parent elements. That is, child elements of that particular parent will be centered, not the parent.
To center .testclassHTML
<div class="parent">
<div class="testclass"></div>
</div>
CSS
.parent {
background-color: red;
display: flex;
justify-content: center;
}
.testclass {
background-color: green;
width: 200px;
height: 200px;
}
If you want full center (horizontal vertical) you can use this code:
.container {
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
<div class="container">
<div class="testclass">Content</div>
</div>
I'm currently designing a header bar for a site I'm working on. I would like the header to show a logo at the left, the title in the center, and the user account on the right.
This mockup is what I'm envisioning. Note that the dotted boxes denote a div.
I've made some progress on creating it in HTML/CSS, but I can't seem to get the title to center to the viewport.
As you can see, the title is centering itself between the logo and the account info divs, instead of centering itself on the viewport. This ends up making the page just look a little bit off, and so I would really like to center the title to the viewport.
Here's my code:
.headerBarArea {
background-color: #7785A2;
border: 0;
padding: 0;
width: 100%;
display: inline-block;
text-align: center;
}
.logoArea {
display: inline;
text-align: center;
float: left;
border: lawngreen;
border-style: dashed;
border-width: 1px;
}
.minesLogo {
width: 96px;
}
.titleArea {
display: inline-block;
text-align: center;
border: lawngreen;
border-style: dashed;
border-width: 1px;
}
.siteTitle {
color: white;
}
.pageTitle {
color: white;
}
.userAccountArea {
display: inline;
text-align: center;
float: right;
border: lawngreen;
border-style: dashed;
border-width: 1px;
}
.userAccountIcon {
float: left;
width: 35px;
}
.userAccountText {
float: right;
}
<div className="headerBarArea">
<div className="logoArea">
<img src="assets/mines_logo_stacked.png" className="minesLogo" />
</div>
<div className="titleArea">
<h2 className="siteTitle">This is my site Title</h2>
<h3 className="pageTitle">Page Title</h3>
</div>
<div className="userAccountArea">
<img src="assets/user_account.png" className="userAccountIcon" />
<span className="UserAccountText">John Smith (Student)</span>
</div>
</div>
Any ideas on what I could do to make the title div centered to the viewport, instead of centering between the two divs?
html code
<div class="flex-container">
<div class="flex-item">1</div>
<div class="align-self-center">
<span class="siteTitle">This is my site Title</span>
<br>
<div class="text-center ">Page Title</div>
</div>
<div class="flex-item align-self-end third-item">3</div>
</div>
CSS code
.flex-container {
/* We first create a flex layout context */
display: flex;
/* Then we define the flow direction
and if we allow the items to wrap
* Remember this is the same as:
* flex-direction: row;
* flex-wrap: wrap;
*/
flex-flow: row wrap;
/* Then we define how is distributed the remaining space */
justify-content: space-between;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
text-align: center;
}
.third-item {
height: 100px;
}
.text-center{
text-align: center;
}
.align-self-end{
align-self:end;
}
.align-self-center{
align-self:center;
}
code output
code solution
used flex to place the items used .flex-container as parent div where flex items are placed in .justify-content: space-between; is used to place space in between the items. align-self:center; is used to place Page Title at center
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
codepen
.headerBarArea{
display:flex;
justify-content: space-between;
align-items: center
}
It is an easy way to the layout.
you can try it.
Try adding margin-left:auto; and margin-right:auto; to the .titleArea class .
I would suggest using a flex-box though.
Replace your css code with this to make title div centered in all the viewport.
.headerBarArea {
background-color: #7785A2;
border: 0;
padding: 0;
width: 100%;
display:flex;
justify-content: space-between;
}
.logoArea , .titleArea , .userAccountArea {
border: lawngreen;
border-style: dashed;
border-width: 1px;
}
.minesLogo {
width: 96px;
}
.titleArea {
text-align: center;
}
.siteTitle , .pageTitle{
color: white;
}
.userAccountIcon {
float: left;
width: 35px;
}
.userAccountText {
float: right;
}
I'm attempting to vertically align 2 divs with different heights and widths, which I've horizontally centered on the page. Text-align doesn't appear to do anything, and I was hoping that there was a solution that I'm missing.
CSS
.center {
text-align: center;
}
div#map {
background: blue;
display: inline-block;
height: 250px;
margin: 10px 15px;
width: 300px;
}
div.contact {
display: inline-block;
margin: 10px 15px;
overflow: auto;
text-align: center;
width: 350px;
}
HTML
<div class="center">
<div id="map">...</div>
<div class="contact">...</div>
</div>
Just add vertical-align: middle:
div#map,
div.contact {
vertical-align: middle;
display: inline-block;
}
.center {
text-align: center;
}
div#map {
vertical-align: middle;
background: blue;
display: inline-block;
height: 250px;
margin: 10px 15px;
width: 300px;
}
div.contact {
vertical-align: middle;
display: inline-block;
background: green;
margin: 10px 15px;
overflow: auto;
text-align: center;
width: 350px;
}
<div class="center">
<div id="map">...</div>
<div class="contact">...</div>
</div>
I'd set text-align: left for the .contact div and vertical-align: middle for both (since they are inline-blocks)
http://codepen.io/anon/pen/QdNaoJ
You can use flexbox
.center {
align-items: center;
}
You can find the flexbox documentation here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
User this in your css
div#map,div.contact {
display: inline-block;
vertical-align:middle;
}
vertical-align:middle; will aling the data in middle between your div
How can i center image in any div in HTML & CSS ?
I have a nav bar that uses images as links for other pages, the nav bar is multiple divs each has an image and anther div contains a words, how can I center this img in the div
The CSS:
#Nav
{
height: 150px;
margin-top: 50px;
}
#Nav ul
{
list-style-type: none;
padding: 50px;
padding-top: 0px;
width: 100%;
}
#Nav li
{
float: left;
font-size: 12px;
font-weight: bold;
letter-spacing: 0;
margin: 30px;
}
#Nav a
{
display: inline-block;
padding: 5px;
width: 70px;
height: 100px;
color: black;
text-decoration: none;
}
#Nav a:hover
{
border: 2px solid #ddd;
border-radius: 4px;
box-shadow: 0 0 2px 1px rgba (0, 140, 186, 0.5);
}
#img img
{
align-self: middle;
width: 50px;
height: 50px;
}
#desc
{
margin-top: 15px;
text-align: center;
}
The html:
<li> <a target="_blank" href="#">
<div id="img"> <img src="C:/Users/hp1/Desktop/Website/Pictures/Accessories.jpg" alt="Accessories">
<div id="desc"> Accessories </div>
</div>
</a> </li>
You need to change your CSS for image like below:-
#img img
{
display: block;
margin: 0 auto;
}
You can see Many Demos Here-
Note that align-self is for elements inside a flexbox container which is not your case, you can try with text-align: center; on img.
Or if you wish to go full flexbox, set the img container to:
.containerClass {
display: flex;
flex-flow: column wrap;
justify-content: center;
}
With this setup align-self on the img is not need since justify-content on it's container will do.
Flexbox to the rescue:
.parent {
width:200px; height:200px;
border:2px solid #000;
display: flex; /* Make it flex */
flex-direction: column; /* wrap children elements to columns */
align-items: center; /* Center children horizontally */
justify-content: center; /* Center children vertically */
}
<div class="parent ">
<img src="http://placehold.it/100x100/cf5">
<p>Green-ish</p>
</div>
<div class="parent ">
<img src="http://placehold.it/100x100/5fc">
<p>Blue-ish</p>
</div>
align-self: center; is valid, align-self: middle; is not valid.
However, you can probably achieve what you're wanting with text-align: center;. Despite it being an image, you can still center using text-align as images are, by default, inline elements just like text.
#img img
{
align-self: center;
width: 50px;
height: 50px;
}
OR
#img img
{
text-align: center;
width: 50px;
height: 50px;
}
First you have to change the nature of div to table then make its align to center like this
#img img
{
display:table;
align: center;
width: 50px;
height: 50px;
}
Demo
<div class="subject" index= "0">
<span class="subject_name">FIFA</span>
<span class="subject_completion">55%</span>
</div>
.subject span
{
display: table-cell;
vertical-align: middle;
}
Why it is not vertically aligning my span div? How do i align it vertically which should not affect horizontal aligning also?
I am not preferring using top, margin-top, padding-top. I am preferring something which should work even size of my circle changes.
I am free to modify html also, but i am first preferring span instead div.
Please suggest some solutions.
You don't need any special rules at all for the spans. You can just add these three rules to the container:
.subject {
display: flex;
align-items: center;
justify-content: center;
}
.user_body_content_container
{
display: table;
}
.subject_container
{
width: 200px;
height: 250px;
border: 1px solid #eee;
display: table-cell;
}
.subject
{
border-radius: 50%;
border: 1px solid #653;
width: 175px;
height: 175px;
margin: auto;
margin-top: 25%;
display: flex;
align-items: center;
justify-content: center;
}
<div class="user_body_content_container">
<div class="subject_container" id="subject_container0" index="0">
<div class="subject" index= "0">
<span class="subject_name">FIFA</span>
<span class="subject_completion">55%</span>
</div>
</div>
</div>
you have too many display: table and display: table-cell for the task you're doing.
try
.user_body_content_container
{
}
.subject_container
{
width: 200px;
height: 250px;
border: 1px solid #eee;
/*display: table-cell;*/
/*remove above*/
}
.subject
{
border-radius: 50%;
border: 1px solid #653;
width: 175px;
height: 175px;
margin: auto;
margin-top: 25%;
display: table;
text-align: center;
}
.subject span
{
display: table-cell;
vertical-align: middle;
}
Jsfiddle
You can use following CSS classes.
.user_body_content_container
{
display: table;
}
.subject_container
{
width: 200px;
height: 250px;
border: 1px solid #eee;
display: table-cell;
position:absolute;
}
.subject
{
border-radius: 50%;
border: 1px solid #653;
width: 175px;
height: 175px;
margin: auto;
margin-top: 25%;
}
.subject span
{
display:block;
position: relative;
top:50%;
text-align:center;
}
So here's the solution I came up with:
css:
body, html{
margin:0; padding:0;height:100%
}
.user_body_content_container{
height:100%;
}
.subject_container{
display:table;
width:100%;
height:100%;
vertical-align:middle
}
.subject
{
display: table-cell;
vertical-align: middle;
text-align:center;}
.subject span{border:1px solid black;width:175px; display:inline-block}
/*no height given, to give it room to adjust for long texts*/
tested it with long text and short text and it appears to be working.
Note: 100% heights are required in the container `div's and body to make the page full height.
here's the codepen: http://tinyurl.com/klzknog
There are three ways for vertical align: flexbox, display: table-cell and position.
HTML
<div class="container one">
<p>I'm a text</p>
</div>
<div class="container two">
<p>I'm a text</p>
</div>
<div class="container three">
<p>I'm a text</p>
</div>
CSS (Sass)
.container {
width: 200px;
height: 200px;
border: 1px solid tomato;
float: left;
margin-right:1em;
}
.one {
display: table;
p {
display:table-cell;
vertical-align: middle;
}
}
.two {
display: flex;
align-items: center;
}
.three {
position: relative;
p {
position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0;
}
}
Demo
Add the following style to the parent class
.subject{
text-align: center;
display: table-cell;
vertical-align: middle;
}
this would align the span both horizontally and vertically