相关疑难解决方法(0)

我想让我的 div2 居中对齐，div3 位于右侧。

我尝试使用文本对齐：主 div 的中心并使浮动向右到 div3 来做到这一点，但它通过考虑主 div 的剩余部分来使其居中对齐。我已经给主 div 赋予了 display: inline-flex

<div style="height: 40px;width:120px;background-color: yellow;align-items: center;">

<div style="height: 20px;width:20px;background-color: red;">
  Hello
</div>

<div style="height: 20px;float: right;width:20px;background-color: red;">
</div>
</div>

我有一个 div，里面有两个项目。我将它们放在一列中，需要第一个项目来对齐：中心，第二个项目来对齐：flex-end。我该怎么做呢？

HTML：

<div class="wrapper wrapper--login">
   <h1 class="wrapper--login__title">
      Demo or Die
   </h1>
   <a class="btn wrapper--login__btn" href="#">
      Log in
   </a>
</div>

CSS：

.wrapper--login{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

结果是我想要什么：

我在一个容器中有三个元素，display: flex我希望左侧的项目与左侧对齐，右侧的项目与右侧对齐。中心项目在中心对齐。

space-between是不是修复。这不是我要找的解决方案。这是因为元素的宽度不同。即使宽度不同，我仍然希望中间元素居中。

这可以用包装纸固定。然后flex: 1在包装纸上放一个，然后在这些包装纸内放元素本身。同样，这不是我要寻找的解决方案。我无法使用包装器。

.parentContainer {
  display: flex;
  justify-content: center;
  align-items: center;
}

.parentContainer > *{
   background: red;
   text-align: center;
}

<div class="parentContainer">
 <div class="left">small</div>
 <div class="middle">medium element here</div>
 <div class="right">longer element is here too</div>
</div>

我正在尝试创建一个带有三个内部内联元素的全角横幅。反向链接、徽标和正向链接。

我还想使用相同的代码创建一个带有两个内部内联元素的全角横幅。左后链接和中央徽标。

到目前为止我所拥有的是：

超文本标记语言

 <section id="header-blue">
  <div id="header-wrap">
    <div class="header-left"><p>1</p></div>
    <div class="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div>
    <div class="header-right"><p>3</p><p>3</p></div>
    <div class="clearfix"></div>
  </div>
</section>

社会保障体系：

#header-blue {
  width: 100%;
  margin-bottom: 50px;
  height: auto;
  background-color: $primary-blue;
  color: #fff;

  #header-wrap {
    text-align: center;
    border: 1px solid green;
    margin: 0 auto;
    padding: 1rem 2.5rem;
    div {
      display: inline-block;
      vertical-align: middle;
    }
  }

  .header-left {
    float: left;
    border: 1px solid red;
    width: 100px;
  }
  .header-right {
    float: right;
    border: 1px solid red;
    width: 100px;
  }
  .header-center {
    border: 1px solid …

我正在玩flexboxCSS.我正在尝试创建导航菜单.我希望菜单的第一项位于最左侧,其余项目位于中心.目前我的一切都在中心.要在中心对齐内容我正在使用justify-content: center容器.

但我不知道我可以调整特定项目flex-box.我试过float它但是因为float不是为了对齐而且float也不能用于flexbox项目.有没有办法/解决方法来实现这一目标？谢谢.这是可以玩的笔.

body{
  background: #e0f080;
    color: white;
    font-weight: bold;
    font-size: 1em;
}
.flex-container {
    display: -webkit-flex;
    display: flex;
    background-color: tomato;
    color: white;
    font-weight: bold;
    font-size: 1em;
    justify-content: center;
}
.flex-item{  
    align-content: space-around;
    margin: 10px;
  border: 2px solid white;
  padding: 5px;
}
.menu{
  order: -1;  
  align-self: start;
  font-size: 3em;
}

我希望弹性项目位于中心，只有最后一个项目位于末尾，但是当我使用 时margin-left: auto，其他项目都放在开头。

#container {
  background-color: wheat;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  background-color: thistle;
  margin: 5px;
  padding: 10px;
}

.item:last-child {
  margin-left: auto;
}

<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>  
</div>

我不得不使用自动边距来对齐页面中心的内容。

div {
  background: #121212;
  font-size: 100%;
  display: flex;
}
a {
  color: #fff;
  padding: 2%;
  display: inline-block;
  background: linear-gradient(180deg, rgba(18, 18, 18, 0.8) 0%, rgba(18, 18, 18, 0.5) 66.66%), url('https://cml.sad.ukrd.com/image/714544.png');
  background-size: cover;
  background-position: top;
  white-space: nowrap;
  font-size: 18px;
}
img {
  height: 100%;
  width: auto;
  display: flex;
  align-self: center;
  max-height: 50px;
  margin: 0 auto;
  /* fails justify-self: center; */
}

<div>
  <a href="#">? Some Text Goes Here</a>
  <img src="https://cml.sad.ukrd.com/image/714824.png">
</div>

我想发现如何将块图像定位在父 div 的中心。div 已经有另一个<a>孩子，它正在将块图像稍微推出中心。div 父级是一个 flexbox，我认为有一个justify-self: …