Css 容器内浮动元件（导航控件）的垂直居中

我读过书和朋友；前者是指水平居中，而朋友则是指不漂浮的孩子。我为什么要用彩车？好吧，继续读

以下是我想要的布局：

+-------+-------------------+-------+
|       | ##### ##### ##### |       |
| [ < ] | ##### ##### ##### | [ > ] |
|       | ##### ##### ##### |       |
+-------+-------------------+-------+

.outer{
位置：相对位置；
边框：1px纯黑；
}
.导航{
位置：相对位置；
边框：1px纯绿色；
宽度：4%；
身高：100%；
浮动：左；
显示器：柔性盒；
对齐内容：居中对齐；
}
旋转木马{
位置：相对位置；
边框：1px纯红；
宽度：90%；
}
img{
背景：浅蓝色；
显示：块；
}
.形象{
位置：相对位置；
浮动：左；
左侧填充：12px；
右侧填充：12px；
填充顶部：6px；
垫底：6px；
高度：自动；
边框：1px纯黑；
}

---

只需使用Flexbox…垂直居中对齐使用

对齐项目：居中

，水平居中使用

对齐内容：居中

$（'document'）.ready（函数（）{
setTimeout（函数（）{
$（'img'）.css({
宽度：“150px”，
高度：'110px'
});
}, 1500);
});
.outer{
位置：相对位置；
边框：1px纯黑；
显示器：flex；
对齐项目：居中；
}
.导航{
位置：相对位置；
边框：1px纯绿色；
宽度：5%；
身高：100%；
文本对齐：居中；
}
旋转木马{
位置：相对位置；
边框：1px纯红；
宽度：90%；
显示器：flex；
证明内容：中心；
}
img{
背景：浅蓝色；
显示：块；
最大宽度：100%；
}
.形象{
位置：相对位置；
填充：6px 12px；
边框：1px纯黑；
}
只需使用Flexbox…垂直居中对齐使用
对齐项目：居中
，水平居中使用
对齐内容：居中


$（'document'）.ready（函数（）{
setTimeout（函数（）{
$（'img'）.css({
宽度：“150px”，
高度：'110px'
});
}, 1500);
});
.outer{
位置：相对位置；
边框：1px纯黑；
显示器：flex；
对齐项目：居中；
}
.导航{
位置：相对位置；
边框：1px纯绿色；
宽度：5%；
身高：100%；
文本对齐：居中；
}
旋转木马{
位置：相对位置；
边框：1px纯红；
宽度：90%；
显示器：flex；
证明内容：中心；
}
img{
背景：浅蓝色；
显示：块；
最大宽度：100%；
}
.形象{
位置：相对位置；
填充：6px 12px；
边框：1px纯黑；
}
您还必须将
显示：flex
设置到外部元素。
我更新了你的css并简化了css


$（'document'）.ready（函数（）{
setTimeout（函数（）{
$（'img'）.css({
宽度：“150px”，
高度：'110px'
});
}, 1500);
});
.outer{
边框：1px纯黑；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.导航{
边框：1px纯绿色；
利润率：0.5px；
}
旋转木马{
边框：1px纯红；
柔性生长：1；
显示器：flex；
证明内容：中心；
}
img{
背景：浅蓝色；
}
.形象{
填充：6px 12px；
边框：1px纯黑；
}
.导航箭头{
填充物：5px；
}
您还必须将
显示：flex
设置到外部元素。
我更新了你的css并简化了css


$（'document'）.ready（函数（）{
setTimeout（函数（）{
$（'img'）.css({
宽度：“150px”，
高度：'110px'
});
}, 1500);
});
.outer{
边框：1px纯黑；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.导航{
边框：1px纯绿色；
利润率：0.5px；
}
旋转木马{
边框：1px纯红；
柔性生长：1；
显示器：flex；
证明内容：中心；
}
img{
背景：浅蓝色；
}
.形象{
填充：6px 12px；
边框：1px纯黑；
}
.导航箭头{
填充物：5px；
}

one word-flexbox-不再需要浮动，然后您也可以进行垂直居中
display:flexbox不正确。正确的将是
显示：flex一个单词-flexbox-不再需要浮动，然后您也可以进行垂直居中
显示：flexbox不正确。正确的将是
显示：flex静态位置是默认位置谢谢@Christian，这很好用！但是有一件事，如果必要的话，我可以提出一个新的问题，但是有没有办法让导航控制成为集装箱的高度？我希望身高：100%能达到这个目标，但事实并非如此。全高控件更容易单击。啊，看起来就像在导航元素中添加“对齐自：拉伸”一样简单。是的。调整自我是前进的方向。Yhx对于acceptingposition静态是默认位置谢谢@Christian，这非常有效！但是有一件事，如果必要的话，我可以提出一个新的问题，但是有没有办法让导航控制成为集装箱的高度？我希望身高：100%能达到这个目标，但事实并非如此。全高控件更容易单击。啊，看起来就像在导航元素中添加“对齐自：拉伸”一样简单。是的。调整自我是前进的方向。Yhx接受
+-------+-------------------+-------+
| [ < ]                             | 
| ##### ##### #####                 |
| ##### ##### #####                 |
| ##### ##### #####                 |
| [ > ]                             |
+-------+-------------------+-------+

+-------+-------------------+-------+
| [ < ] | ##### ##### ##### | [ > ] |
|       | ##### ##### ##### |       |
|       | ##### ##### ##### |       |
+-------+-------------------+-------+