.container{width:50%;padding:10px;box-sizing:border-box;background-color:#00FF00;}
.container::after {content: ''; display: table; clear: both;}
.child{width:100px;height:30px;line-height:30px;text-align:center;border-radius:2px;background-color:#FFFF00;float:left;margin:2px;}
<div class="container">
<div class="child">First</div>
<div class="child">Second</div>
<div class="child">Third</div>
<div class="child">Fourth</div>
</div>
I want to align the content of .container in center without using property display: inline-block; on .child.
see here : jsfiddle
EDITED : use display:flex with justify-content:center on the .sub-container and display:inline-block to .child
or you could use float:left on .child , it still works. but i suggest you don't use float when you want to center smth
code :
.child
{
width: 50px;
height: 30px;
text-align: center;
border-radius: 10px;
background-color: #FFFF00;
display:inline-block;
}
.sub-container
{
width: 50%;
height: auto;
padding: 10px;
box-sizing: border-box;
margin: 0px auto;
background-color: #00FF00;
float: left;
text-align: center;
position:relative;
display: flex;
justify-content: center;
}
let me know if this was what you were looking for
Add to .main-container { margin: 0 auto; display: table; } and remove width:100%;
Maybe this can help you:
Add margin 50% - half the width of the container. Just a disclaimer: this is not supported in some of the browsers.
.child {
width: 100px;
height: 30px;
margin-left: calc(50% - 50px);
text-align: center;
border-radius: 10px;
background-color: #FFFF00;
float: left;
}
Related
I use resizable split views with split.js
I have a very basic setup with 2 panes
How can I center bottom-footer in the right pane?
Since the width of the pain is dynamic the footer doesn't centered properly once pane resized.
I've tried all possible positioning - absolute, fixed, sticky, relative but nothing seems to be work.
JSFiddle
Split(['.split-left', '.split-right'], {
gutterSize: 10,
sizes: [33,67] // in %
})
body {
margin: 0;
height: 100vh;
overflow: hidden;
}
.content {
width: 100%;
height: 100%;
display: flex;
justify-items: center;
align-items: center;
}
.split {
width:100%;
height:100%;
border: 0px solid;
overflow: hidden;
}
.split-left {
background-color: rgb(250,250,250);
padding: 20px;
padding-top: 0px;
overflow-x: hidden;
overflow-y: auto;
padding-bottom: 60px;
}
.split-right {
background-color: rgb(253,253,253);
background-color: white;
padding-top: 0px;
padding-right: 50px;
padding-left: 50px;
text-align: center;
overflow-x: hidden;
overflow-y: hidden;
}
.gutter {
cursor: col-resize !important;
height: 100%;
background: #ddd;
}
.footer {
position: fixed;
bottom: 0;
width: 60%;
background: rgba(255,0,0,0.2);
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.5.11/split.min.js"></script>
<body>
<div class="content">
<div class="split split-left">
</div>
<div class="split split-right">
<div class="content"></div>
<div class="footer">Footer</div>
</div>
</div>
</body>
you can use css flexbox
.split-right {
display: flex;
justify-content: center; // center horizontally
align-items: center; // center vertically
}
css flexbox tutorial
I have three div elements inside a wrapper-div as below:
<div class="wrapper-div">
<div class="left-div">
Hi
</div>
<div class="middle-div">
Hello
</div>
<div class="right-div">
Bye
</div>
</div>
I have applied below CSS on these which makes them appear side by side in the same row.
.wrapper-div {
display: inline-block;
}
.left-div {
display: inline-block;
width: 50px;
height: 20px;
margin-right: 10px;
background-color: red;
}
.middle-div {
display: inline-block;
width: 20px;
height: 10px;
margin-right: 10px;
background-color: green;
font-size: 8px;
}
.right-div {
display: inline-block;
width: 50px;
height: 20px;
margin-right: 10px;
background-color: blue;
}
Now I want middle div to appear as a superscript to the text in left div. To achieve it I apply below CSS to the middle-div.
.middle-div {
display: inline-block;
width: 20px;
height: 10px;
margin-right: 10px;
background-color: green;
font-size: 8px;
position: relative;
left: -45px;
top: -5px;
}
This makes the middle-div appear as a superscript to the left-div however it leaves an undesired white space in middle-div's original position.
Could you please help me with fixing it.
Note: In my original problem I have an uncontrolled variable number of divs where I want every second div to act as a superscript to its previous div.
Set the wrapper to position: relative; and display: flex;
then you can simply set the middle div to absolute as below when you want it to do the superscript effect.
.wrapper-div {
display: flex;
position: relative;
}
.left-div {
display: inline-block;
width: 50px;
height: 20px;
background-color: red;
position: relative;
margin-right: 0;
}
.middle-div {
display: block;
width: 20px;
height: 10px;
background-color: green;
font-size: 8px;
position: absolute;
left: 25px;
top: 2px;
}
.right-div {
display: inline-block;
width: 50px;
height: 20px;
margin-right: 10px;
background-color: blue;
}
<div class="wrapper-div">
<div class="left-div">
Hi
</div>
<div class="middle-div">
Hello
</div>
<div class="right-div">
Bye
</div>
</div>
If you can't change the div structure (put the middle inside the left), you could put the wrapper in position:relative and the middle div in position:absolute instead.
It will give :
.wrapper-div {
display: inline-block;
position:relative;
}
.middle-div {
display: inline-block;
width: 20px;
height: 10px;
margin-right: 10px;
background-color: green;
font-size: 8px;
position: absolute;
left: 20px;
top: 2px;
}
Here is a Codepen: https://codepen.io/anon/pen/ePrMqv
I believe it would be more correct (and also give you less headaches) to have the "superscript" divs as subdivs like this:
<div class="left-div">
Hi
<div class="middle-div">
Hello
</div>
</div>
This would be both easier to read in code and easier to control with regard to positioning.
Don't use positioning: use negative margin.
.wrapper-div {
display: inline-block;
}
.left-div {
display: inline-block;
width: 50px;
height: 20px;
margin-right: 10px;
background-color: red;
}
.middle-div {
display: inline-block;
width: 20px;
height: 10px;
background-color: green;
font-size: 8px;
margin-left: -35px;
margin-right: 0;
vertical-align: top;
}
.right-div {
display: inline-block;
width: 50px;
height: 20px;
margin-right: 10px;
background-color: blue;
}
<div class="wrapper-div">
<div class="left-div">
Hi
</div>
<div class="middle-div">
Hello
</div>
<div class="right-div">
Bye
</div>
</div>
Codepen of the difference between positioning / transform / negative margin
My setup is the following
<div class=wrapper>
<div class=element />
</div>
Markup
.wrapper {
height: 40px;
width: 80px;
border-style: solid;
border-width: 2px;
border-radius: 40px;
border-color: red;
display: flex;
align-items: center;
justify-content: center;
}
.element {
background-color: hotpink;
width: 10px;
height: 10px;
}
.wrapper:hover {
width: 800px;
-webkit-transition: width 0.4s ease-in-out;
}
https://codepen.io/anon/pen/eLzGXY
Right now, when I click on the Icon, the Icon moves into the middle of the wrapper, as it transitions. I want it to stay in the left, on its original position. How would I do that?
You can achieve using set css property when mouse hover.
See, Below example.
.wrapper {
height: 40px;
width: 80px;
border-style: solid;
border-width: 2px;
border-radius: 40px;
border-color: red;
display: flex;
align-items: center;
justify-content: center;
}
.element {
background-color: hotpink;
width: 10px;
height: 10px;
}
.wrapper:hover {
width: 800px;
-webkit-transition: width 0.4s ease-in-out;
justify-content: left;
padding-left:35px;
}
<div class=wrapper>
<div class=element>
</div>
</div>
IMHO there are multiple ways to go about this -
If you are not averse to use positioning - you can set the element position as absolute and with some hacky left you can achieve what you want.
.element {
background-color: hotpink;
width: 10px;
position:absolute;
left:37px;
height: 10px;
}
https://codepen.io/anon/pen/OoXOPo#anon-login
Or we can use relative with some a justify-items:start on the parent container to place the element in its place always
https://codepen.io/anon/pen/eLzeZp
To keep the the square class element to the left, remove:
.wrapper {
justify-content:center;
}
and then margin the element like so:
.element {
margin-left:35px;
}
https://codepen.io/FEARtheMoose/pen/mGEqVL
Here's my setup, I'm using the library interact.js with vuejs.
Here's my dilemma.
I have a container absolutely positioned on the bottom. Within that container I have another container that holds a list of elements which is cropped with overflow-y: scroll.
Within that .list container I have .item divs which hold the draggable .icon element. The .item has a position: relative.
Because I'm using vue it's not recommended to make changes to the dom directly, so on the dragstart event I create a "clone" .icon with a position of absolute using a vue conditional and drag that around instead.
However because of my aforementioned setup I cannot drag outside of the .list container due to cropping. If I remove the position: relative on the .item div, then the cloned .icon will not behave accordingly due to the scrollTop.
It's far too much code to post here, so I have a working example at codepen.
https://codepen.io/helixion/pen/qPGxPK
body {
margin: 0;
font-family: "roboto", sans-serif;
}
header {
width: 100%;
height: 70px;
background-color: #232323;
position: relative;
}
.container {
width: 100%;
height: 100vh;
display: flex;
}
#main {
position: relative;
min-height: 100%;
height: 100%;
width: calc(100% - 50px);
}
#ctrl-menu {
position: relative;
display: -webkit-flex;
display: flex;
flex-direction: column;
align-items: center;
width: 50px;
background-color: #1d1d1d;
.ctrl {
margin-top: 5px;
border: 2px solid;
padding: 5px;
width: 20px;
height: 20px;
border-radius: 4px;
color: #f1f1f1;
position: relative;
text-align: center;
&:first-child {
margin-top: 30px;
}
&:hover {
color: #ff6961;
.tooltip {
display: block;
color: #f1f1f1;
}
}
.tooltip {
display: none;
background-color: rgba(22, 22, 22, 0.5);
padding: 2px;
position: absolute;
top: 5px;
width: 150px;
left: 48px;
font-size: 12px;
border-radius: 4px;
z-index: 1003;
}
}
}
#navbar {
display: -webkit-flex;
display: flex;
align-items: center;
.logo {
position: relative;
z-index: 1000;
margin-left: 8px;
img {
width: 100%;
height: 100%;
}
}
}
.bottom-menu {
position: absolute;
bottom: 0;
background-color: #232323;
width: 100%;
height: 500px;
z-index: 1001;
#resizer {
height: 17px;
background-color: #1d1d1d;
cursor: ns-resize;
touch-action: none;
}
}
.list {
display: -webkit-flex;
display: flex;
background-color: #222;
width: 100%;
height: 100%;
flex-direction: column;
overflow-y: scroll;
.item {
display: flex;
align-items: center;
width: 100%;
// position: relative;
border-bottom: 1px solid #1d1d1d;
box-shadow: inset 0 1px 1px rgba(55, 55, 55, 0.5),
0 1px 1px rgba(55, 55, 55, 0.5);
min-height: 70px;
.details {
flex: 0 0 calc(100% - 180px);
.name {
color: #cdaf7c;
-webkit-margin-before: unset;
-webkit-margin-after: unset;
}
.desc {
-webkit-margin-before: 0.5em;
-webkit-margin-after: unset;
width: 80%;
font-size: 12px;
color: #f1f1f1;
}
}
.source {
display: flex;
justify-content: flex-end;
align-items: center;
text-align: right;
flex-basis: 100px;
flex-direction: column;
margin-right: 10px;
.name {
color: #cdaf7c;
font-size: 14px;
}
.type {
color: #f1f1f1;
font-size: 12px;
}
}
}
}
.icon {
width: 70px;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
touch-action: none;
&.dragging {
position: absolute;
z-index: 1100;
opacity: 0.5;
}
img {
width: 60px;
height: 60px;
}
}
With position relative on the .item turned off everything works fine at scrollTop 0, but once I start scrolling the problems start to happen. If I turn position: relative back on the .item element, I can't drag the "clone" .icon outside of the .list container.
Any suggestions or advice to fix it up so where I can drag the absolute div (.icon which is created by vuejs on a conditional) outside of .list (which has overflow-y:scroll) would be appreciated. Thanks.
<div class="add_nav_header">
<div class="centerButtons">
<a class="btnLogout smallBtn" data-role="button"></a>
<a class="btnSearch smallBtn" data-role="button"></a>
<a class="btnViewList smallBtn" data-role="button"></a>
</div>
</div>
.centerButtons {
width: 50%;
margin: 0 auto;
}
.add_nav_header {
display: inline-block;
width: 100%;
border-bottom: 1px solid #ccc;
padding-bottom: .5em;
}
.smallBtn {
float: right;
margin: .3em;
padding: .6em;
font-size: .9em;
}
.btnLogout {
float: right;
}
.btnViewList {
float: left;
}
.btnSearch {
left: -33%;
}
This is my html and css and I want to center the middle btnSearch button but I don't want to have to set the left percentage for every screen size with media queries.
jsfiddle example
You could use text-align: center to the container and remove float from div you want to be centered.
.centerButtons {
width: 50%;
margin: 0 auto;
text-align: center;
}
.add_nav_header {
display: inline-block;
width: 100%;
border-bottom: 1px solid #ccc;
padding-bottom: .5em;
}
.smallBtn {
/* float: right; */
margin: .3em;
padding: .6em;
font-size: .9em;
display: inline-block;
}
.btnLogout {
float: left;
}
.btnViewList {
float: right;
}
/* .btnSearch {
left: -33%;
} */
Fiddle: http://jsfiddle.net/zfh1ono0/
I'm not sure if I fully understand your question, but this link might help you: CSS centering. The key is this line:
transform: translate(-50%, -50%);