Javascript 4居中并使div和x2B相等；右上下连杆

我创建了一个以4列（几乎）为中心的html作为我网站的展示，现在我想添加一个新的div，链接浮动在页面的右下角，我的问题是元素作为新列输入，中心不正确或位置不正确：

.init {
    height: 100%;
    position: absolute;
    top 0px;
    bottom 0px;
    float: right;
    background: yellow;
    margin-left: 15px;
    font-weight: 700;
    text-align: right;
    color: red;
}

这里有一把小提琴，你可以看到这个问题：

基本上我的问题是如何将4列居中，并将ENTER链接浮动在底部rigth。。。像这样的

---

PS：我使用百分比和边距将列居中，但如果有更好的方法可以更改它，您可以将

显示：flex

添加到父级，将它们放在flex

行中，然后使用
对齐项：flex end
将所有项对齐到底部，并从
init中删除
高度：100%
，使其移动到底部。对于
.bar


html，正文{
宽度：80%；
身高：100%；
填充：0；
保证金：自动；
背景：黄色；
文本对齐：居中；
字体：标准16px“Roboto”，无衬线；
}
.酒吧{
弹性：100；
背景：红色；
字号：700；
文本对齐：居中；
颜色：黄色；
}
.bar:不是（：第一个孩子）{
左边距：15px；
}
.init{
背景：黄色；
字号：700；
文本对齐：右对齐；
颜色：红色；
位置：绝对位置；
底部：0；左侧：计算（100%+15px）；
}
：-moz选择{
颜色：黄色；
背景：红色；
}
：：选择{
颜色：黄色；
背景：红色；
}
p、 数字{
字号：5em；
}
p、 元，p.strings{
字号：1.5em；
}
h1{
字体大小：4.5em；
}
.包裹{
显示器：flex；
位置：相对位置；
身高：100%；
}

00
D


00
H


00
M


00
S


恩特拉
您可以将
display:flex
添加到父级，将它们放在flex
行中
，然后使用
align items:flex end
将所有项对齐到底部，并从
中删除
高度：100%
。init
使其移动到底部。对于
.bar


html，正文{
宽度：80%；
身高：100%；
填充：0；
保证金：自动；
背景：黄色；
文本对齐：居中；
字体：标准16px“Roboto”，无衬线；
}
.酒吧{
弹性：100；
背景：红色；
字号：700；
文本对齐：居中；
颜色：黄色；
}
.bar:不是（：第一个孩子）{
左边距：15px；
}
.init{
背景：黄色；
字号：700；
文本对齐：右对齐；
颜色：红色；
位置：绝对位置；
底部：0；左侧：计算（100%+15px）；
}
：-moz选择{
颜色：黄色；
背景：红色；
}
：：选择{
颜色：黄色；
背景：红色；
}
p、 数字{
字号：5em；
}
p、 元，p.strings{
字号：1.5em；
}
h1{
字体大小：4.5em；
}
.包裹{
显示器：flex；
位置：相对位置；
身高：100%；
}

00
D


00
H


00
M


00
S


恩特拉

这里有一个更新的小提琴的链接


html，正文{
填充：0px；
宽度：80%；
身高：100%；
保证金：自动；
左：1%；
背景：黄色；
字体：标准16px“Roboto”，无衬线；
}
.酒吧{
宽度：20%；
身高：100%；
浮动：左；
背景：红色；
左缘：2%；
保证金权利：2%；
字号：700；
文本对齐：居中；
颜色：黄色；
}
.init{
位置：绝对位置；
底部：0；
右：0；
背景：黄色；
左边距：0px；
字号：700；
文本对齐：右对齐；
颜色：红色；
}
：-moz选择{
颜色：黄色；
背景：红色；
}
：：选择{
颜色：黄色；
背景：红色；
}
p、 数字{
字号：5em；
}
p、 元，p.strings{
字号：1.5em；
}
h1{
字体大小：4.5em；
}

00
D


00
H


00
M


00
S


恩特拉

这里有一个更新的小提琴的链接


html，正文{
填充：0px；
宽度：80%；
身高：100%；
保证金：自动；
左：1%；
背景：黄色；
字体：标准16px“Roboto”，无衬线；
}
.酒吧{
宽度：20%；
身高：100%；
浮动：左；
背景：红色；
左缘：2%；
保证金权利：2%；
字号：700；
文本对齐：居中；
颜色：黄色；
}
.init{
位置：绝对位置；
底部：0；
右：0；
背景：黄色；
左边距：0px；
字号：700；
文本对齐：右对齐；
颜色：红色；
}
：-moz选择{
颜色：黄色；
背景：红色；
}
：：选择{
颜色：黄色；
背景：红色；
}
p、 数字{
字号：5em；
}
p、 元，p.strings{
字号：1.5em；
}
h1{
字体大小：4.5em；
}

00
D


00
H


00
M


00
S


恩特拉
谢谢！差不多是这样吗？我怎么能把红色的列全部居中（左边有一些额外的像素）和
ENTRA
文本对齐到右边？现在我不明白了
.init {
   position:absolute;
   bottom:0;
   right:0;
   background: yellow;
   margin-left: 15px;
   font-weight: 700;
   text-align: right;
   color: red;
}