使用CSS Flexbox对齐Div

文章/答案/技术大牛

发布

2回答

html、css、flexbox

我一直在努力使用flexbox来实现下面的布局： ? 我尝试了下面的HTML和CSS <div class="flex-container"> <div class="flex-item">2</div> <div

浏览 30提问于2021-03-31得票数 0

回答已采纳

1回答

Float: right属性在flexbox中不起作用

html、css、flexbox

所以我在我的网页中使用了一个flexbox，我有两个元素。我希望第一个元素居中对齐，第二个元素向右对齐。我可以用flexbox属性将它们对齐到中心，但是我不能将第二个属性对齐到左边。下面是我的代码: Html：<p> Hello </p></div><

浏览 2提问于2021-06-07得票数 0

1回答

使用偏移量流畅地定位内容

html、css、fluid-layout

我已经尝试了css函数min和clamp，但是我不能实现我想要的。 width50 {} width: 10em; background: yellow;} <divclass="container"><div class="width50"> <div</

浏览 10提问于2021-07-09得票数 1

1回答

在内联块中垂直对齐子块的最佳方法

html、css、flexbox

我试图在不使用以下方法之一的情况下垂直对齐cyan中的内容： .sections

浏览 1提问于2017-10-30得票数 0

回答已采纳

2回答

css对齐方式无属性

css、reactjs、react-bootstrap

我试图在我的react.js应用程序中使用bootstrap，所以我尝试这样做： <ListGroup.Item> <Button variant="success"> </Button为了创造更好的吸引力，我添加了一个名为myDiv的<e

浏览 9提问于2019-12-19得票数 0

回答已采纳

1回答

为什么是弯曲端和弯曲-开始顶部和底部与弯曲方向:行

html、css、flexbox、alignment

html, body { width: 100%; } flex-direction: row; display: flex;align-items: center; align-self: flex-end; align-self: flex-start;<divclass="flexbox" *ngFor="let a of api.active_article

浏览 2提问于2019-07-23得票数 0

回答已采纳

1回答

使用Flexbox将事物水平和垂直对齐

html、css、alignment、flexbox

我刚刚发现了'Flexbox‘，它看起来真的会让我的(CSS)生活变得更容易。然而，我不能想出如何同时水平和垂直对齐一些东西，这对于Flexbox来说应该是非常容易的。-- Flexbox--> <link rel="stylesheet"

浏览 4提问于2015-01-17得票数 0

3回答

如何在列中垂直和水平居中显示文本？

html、css、twitter-bootstrap、bootstrap-4

我使用的是bootstrap 4。 <div class="col">

浏览 0提问于2017-06-27得票数 0

1回答

我有一个可变的图像集，我显示在一个柔性盒，并试图确保图像垂直和水平对齐他们的父div。我已经尝试了通常的垂直对齐，文本对齐，最大宽度: 100%；和边距:0自动；。有什么好的跨浏览器解决方案，以解决我的困境，不会导致扭曲/左对齐图像？下面是CSS (在它当前的borky表单中，我也尝试过前面提到的以CSS为中心的CSS)： max-width: 100%; max-height: 100%;height:

浏览 1提问于2014-05-25得票数 0

回答已采纳

1回答

无法在flexbox中对齐元素

html、css、flexbox

我当前正在尝试将flexbox中的最后一个元素与其在flexbox底部的元素的高度对齐，但我无法做到这一点。我知道我可以使用align-content: stretch，这是默认行为，但我不希望元素之间有间隙。我只想让“更多的东西”放在盒子的底部，并向右对齐，但我无法通过阅读flexbox规范来弄清楚如何做到这一点。HTML： <img/> <div</em

浏览 32提问于2018-05-31得票数 1

1回答

对齐Flex div中的活动按钮中心

html、css

.box { background-color: red;} width: 100%;} background-color: yellow;<div class="box"> <div class="flexbox</em

浏览 1提问于2021-12-31得票数 0

回答已采纳

3回答

使输入字段始终居中

html、css、input、responsive

下面是html和css代码： #teaser-input{ } margin:auto; color:#36393D; <div id="form> <input type="text" name="email" va

浏览 2提问于2016-12-11得票数 0

1回答

CSS Flexbox水平对齐1项，垂直对齐2项

css、flexbox

我有以下HTML： <div class="icon"> </div> <p>Lorem ipsum dolor...</p>我的

浏览 3提问于2021-12-27得票数 0

4回答

Bootstrap 4在单元格中右对齐

html、css、twitter-bootstrap、html-lists

我目前正在为一个票证系统编写一个接口，它使用Bootstrap 4的网格系统来定位关于系统的组件。从下面的截图中可以看到，UI有两个容器-流体div堆叠在一起。顶部的div完美地对齐了，这是我正在努力解决的第二个问题。> <div class="col"> </div> </<

浏览 1提问于2019-02-23得票数 0

2回答

当显示大小更改时，Flexbox对齐方式不同

html、css、flexbox

我有以下使用Flexboxes的HTML/CSS代码：*{}body { margin: 0.flexbox.links{ } background: blue;<div class="flexbox"> <divclas

浏览 7提问于2017-10-15得票数 0

回答已采纳

1回答

在文本前添加图像

html、jquery、css

我想使用jQuery在文本之前添加一个图像。下面是DOM中的HTML。我不想像在其他页面中那样使用类名添加任何样式，它也会受到影响是否可以使用不变的文本值(picture1示例文本)插入图像例如：|image| picture1示例文本 <div class="a">::before ::after </div>

浏览 17提问于2021-10-27得票数 0

回答已采纳

2回答

用于响应的CSS3 Flexbox

html、css、flexbox

MAJ :添加codepen：<div class="flexbox"> <div class="left">Left</div</em

浏览 3提问于2012-10-24得票数 1

3回答

CSS如何正确对齐div

html、css、flexbox、frontend

目前，为了更好地理解flexbox，我正在不停地使用下面所示的代码。HTML： <link href="https://fonts.googleapis.com/css2?</head> <h1>Let's Play With Flexbox</h1> <section id=&quo

浏览 12提问于2022-04-13得票数 0

回答已采纳

2回答

如何在flex框中垂直对齐2项

html、css、flexbox

我使用柔性盒对齐2个图像水平，然而，我想要第三个项目(字符串在一个段落)垂直对齐下面的图像1。第三项(一周一周的预测器)应该放在第一张图像的下面。} width: 80%;<div class="flexbox-container"> <div class="flexbox-item=""> <&#x

浏览 10提问于2022-09-04得票数 1

3回答

如何使保留在列中的项目对齐？

html、css、flexbox、alignment

我试图在将项目保留在列中的同时对齐它们，但是，当我将项放在列中时，它默认为重新对齐页面上的项。我现在拥有的是： <div>{post.title}</div></div>CSS .postH

浏览 2提问于2017-09-18得票数 2

点击加载更多