This question already has answers here:
Vertically centering a div inside another div [duplicate]
(24 answers)
Closed 6 years ago.
I was create a div and another div inside of the div. I want these dot lines ... should be middle of the parent div (Horizontally and Vertically). Please help me. Thank you.
<div class = "test" style = "width: 32px; height: 22px; display: inline-block; border: 1px solid; border-radius: 5px; text-align: center;">
<div style = "display: inline-block;">...</div>
</div>
One possibility (and there are many) could be to use CSS Flexible Box Layout.
You can use the justify-content property to define aligment along the main axis and the align-items property to define how flex items are laid out along the cross axis.
You .test container would looks like this:
.test {
display: flex;
justify-content: center;
align-items: center;
}
You can check an example on this JSFiddle.
you have to use table-cell on your parent element and inline-block on the child and add vertical-align: middle to parent element:
<div class = "test" style = "width: 32px; height: 22px; display: table-cell; border: 1px solid; border-radius: 5px; text-align: center; vertical-align: middle;">
<div style = "display: inline-block;">...</div>
</div>
https://jsfiddle.net/Lkfr6ar1/
Related
I'm trying to horizontaly resize one div using css property resize: horizonatal. There are other elements right to this div with a padding of 10px that need to follow resizable div whenever it is resized. I'm not sure what would be the best approach to do the resizing? I found some articles about DOM Monitoring, but was wondering if there is a "simpler" way to do this.
You can wrap your elements in a container with display: flex. If you tell your non-resizable element to take up the remaining space, they should flow with the resized elements before them automatically.
Here's a runnable example:
.container {
display: flex;
}
.non-resizable {
flex-grow: 1;
background: pink;
}
.resizable {
resize: horizontal;
overflow: auto;
border: 1px solid black;
margin-right: 12px;
}
<div class="container">
<div class="resizable">Hello</div>
<div class="non-resizable">world!</div>
</div>
This question already has answers here:
Preventing "double" borders in CSS
(19 answers)
Closed 2 years ago.
Relatively new to Javascript/HTML5 etc. I'm often in awe of how many different ways there are to do the same thing. In trying to develop a dashboard app, I'm trying to visually fine tune the CSS to get rid of the double boarder boxes interior to the main div container. (Later these subcontainers will be reaching out to various different APIs.)
I'm pretty sure there is a property I can put onto shared that will overlap the boxes giving a nice even clean look but I wasn't able to find one. What are some other ways to handle this situation? Is there some automated way to do it? Or does one need to specify the borders individually on each sub-containers?
.container {
border: 3px solid black;
display: flex;
position: relative;
flex-direction: column;
margin: 0;
padding: 0;
height: 400px;
}
.shared {
min-height: 100%;
display: flex;
flex-direction: column;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
border: 0;
}
.sub-container {
border: 3px solid black;
margin: 0;
padding: 0;
align-items: stretch;
height: 100%;
}
<div class="container shared" id="D">
<div class="sub-container">
<h2>Section Sub D1</h2>
<p id="D1-values">D1 Values</p>
</div>
<div class="sub-container">
<h2>Section Sub D2</h2>
<p id="D2-values">D2 Values</p>
</div>
<div class="sub-container">
<h2>Section Sub D3</h2>
<p id="D3-values">D3 Values</p>
</div>
</div>
Add a negative margine for the bottom.
in this case for the .sub-container class
like this:
.sub-container {
border: 3px solid black;
margin-bottom: -3px;
padding: 0;
align-items: stretch;
height: 100%;
}
This happens because of the margins.
In evey element inside is the content, as we go outside, the next one is the padding,
then comes the border, but after that we got a margine. So the borders will
always be separated. Except if you add a negative margine for the bottom, with equal pixels as the border. This way the elements will overlap eachother.
allways remember this
We can use a :not and :first-of-type selector to do this neatly.
.sub-container:not(.sub-container:first-of-type) {
border-top: none;
}
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
I would like to center both horizontally and vertically a <p></p> that could consist of one or more lines, in a <div></div>. Only the parent's width and height are known. Note: I refer to the div as parent, and the p as child.
I've seen here and on other sites, that in order to do vertical centering, the best way would be by using display: table on the parent element and display: table-cell combined with vertical-align: middle on the child.
However, I need the div's style.top and style.left to be overwritten later by some javascript, to make it move. By using the table trick, it somehow prevents me from moving the parent, at least this way. Note that the child must stay centered when the div moves.
TL;DR:
How to center text in a div, and then still be able to move the div?
My html's body:
<div id="target">
<p>Centered?</p>
</div>
My CSS
div {
outline: 1px solid white;
background-color: #FF9F00;
position: absolute;
top: 0px;
left: 0px;
width: 200px;
height: 200px;
/* how to center its child? */
}
p {
font-family: Arial;
}
My javascript way of moving:
var target = document.getElementById("target");
target.addEventListener('mousemove', function (event) {
target.style.left = event.x + "px";
target.style.top = event.y + "px";
});
How about use flexbox?
div {
display:flex;
flex-direction:column;
justify-content: center;
text-align:center;
}
<div><p>I want this paragraph to be at the center, but it's not.</p></div>
It works if parent <div> is display: table-cell:
div {
width: 300px;
height: 150px;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
text-align: center;
}
p {
border: 1px solid green;;
display: inline-block;
}
<div>
<p>lorem ipsum bla bla blah</p>
</div>
This question already has answers here:
How can I make a div not larger than its contents?
(43 answers)
Closed 2 years ago.
I am new to Html & CSS. I want a heading which contains text like "Women safty". I want to warp the heading text with border. But when I apply border to text the border covers all the area in the width both left and right.I just want to add border around text only and the text needs to be in center.
Using a span
HTML
<span>Women safty</span>
CSS
body {
text-align: center;
}
span {
border: solid;
}
Result
Using a div, h1 and p
HTML
<h1>Women safty</h1><br /><br />
<div>Women safty</div><br /><br />
<p>Women safty</p><br /><br />
CSS
body {
text-align: center;
}
h1 {
border: solid;
display: inline;
}
div {
border: solid;
display: inline;
}
p {
border: solid;
display: inline;
}
Result
Here is your text in HTML:
<p>Women Safety</p>
In your CSS create your border with this command:
p.solid {border-style: solid; display:inline}
<p style="text-align: center;">
<span style="border: 1px solid red;display: inline-block;">Women safty</span>
</p>
Try This.
#test {
border: solid; padding: 0.5%; display: inline;
}
<p id="test">Women Safety</p>
Is there a CSS way to vertically align my div within the body element?
The thing is my div will have a different height each time, so its not constant.
These are the things I've tried but they dont work:
body { vertical-align: middle; }
#mainContent {
vertical-align: middle;
}
// Also this
body { margin-top: 20%; margin-bottom: 20%; }
I did it without table: (demo on dabblet.com)
The main trick in this demo is that in the normal flow of elements going from top to bottom, so the margin-top: auto is set to zero. However, for an absolutely positioned element acts the same distribution of free space, and similarly can be centered vertically at the specified top and bottom (does not work in IE7).
This trick will work with any sizes of div.
HTML:
<div></div>
CSS:
div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
A common problem indeed. I have seen many people offering straight css solutions for this but they all require knowing the height of the element needing to be centered, so no help there.
I usually do it this way using jquery:
$(document).ready(function(){
site.resize();
$(window).resize(function(){
site.resize();
});
});
var site = {
resize: function(){
var new_margin = Math.ceil(($(window).height() - $('#mainContent').height()) / 2);
$('#mainContent').css('margin-top', new_margin + 'px');
}
};
Surprisingly (or not), the vertical-align tool actually works best for this job. Best of all, no Javascript is required.
In the following example, I am positioning the outer class in the middle of the body, and the inner class in the middle of the outer class.
Preview: http://jsfiddle.net/tLkSV/513/
HTML:
<div id="container">
<span></span><div class="outer">
<span></span><div class="inner">
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0; }
#container {
text-align: center;
height: 100%; }
span {
height: 100%;
vertical-align: middle;
display: inline-block; }
.outer {
width: 100px;
height: 200px;
padding: 0;
border: 1px solid #000;
vertical-align: middle;
display: inline-block; }
.inner {
background: red;
width: 30px;
height: 20px;
vertical-align: middle;
display: inline-block; }
Vertical align works by aligning the centers of elements that are next to each other. Applying vertical-align to a single element does absolutely nothing. If you add a second element that has no width but is the height of the container, your single element will move to vertically center with this no-width element, thus vertically centering it. The only requirements are that you set both elements to inline (or inline-block), and set their vertical-align attribute to vertical-align: middle.
Note: You may notice in my code below that my <span> tag and <div> tag are touching. Because they are both inline elements, a space will actually add a space between the no-width element and your div, so be sure to leave it out.
You can do it without using tables, and without adding extra elements:
<ul>
<li>One short item</li>
<li>Any real long text...</li>
<li>Another short item</li>
</ul>
And then the CSS:
ul {
list-style-type: none;
display: table-row;
}
li {
display: table-cell;
vertical-align: middle;
}
You can see it here
It would work with any other kind of hierarchy, including div, p, etc.
Honestly, my opinion is often that if you're doing vertical alignment you should still be using a table. I know it's often frowned upon, but it is still the simplest and cleanest way to vertically center something.
HTML
<table>
<tbody>
<tr>
<td>
<div>Your DIV here.</div>
</td>
</tr>
</tbody>
</table>
CSS
td {vertical-align: middle;}