相关疑难解决方法(0)

我试图在模态页脚的中心垂直对齐此按钮div.这是我的JSFiddle的链接:https://jsfiddle.net/kris_redden/34jyLpok/

.modal-footer {
  background-color: #2A3E5D;
  color: white;
  height: 100px;
  padding: 2px 16px;
}

.wrapper-div {
  vertical-align: middle
}

.button {
  background: #e8e8e8;
  display: inline-block;
  font-size: 12px position: relative;
}

<div class="modal-footer">
  <div class="wrapper-div">
    <button type="button" class="button"> Submit Filters </button>
  </div>
</div>

我不确定需要改变什么才能使它在蓝色模态 - 页脚div的中心垂直对齐.我知道可以通过在按钮上加上边距来以一种黑客的方式实现这一点,但这不是我想要做的.

我需要将多行文本对齐到中间.这是我正在使用的标记的粗略指南.

<ul>
    <li>
        <a href='#'>This should be centered.</a>
    <li>
</ul>

因此,从我的图像中可以看出,"工作"链接应该垂直居中.我有宽度和高度设置vertical-align: middle;.我知道你需要为它实际工作设置行高,但问题就在于此.如果我将行高设置为72px(元素的高度),那么一些链接将向下拉伸页面,因为它们占用了两行.

有没有一种方法可以在不使用行高的情况下将多行文本对齐到中间？

一切都是网络编程的新手.

我试图垂直对齐两个包装器div,以便它们位于页面的中间,而不管浏览器.该网站可在此处找到:www.armedwithreason.com/massshooting

我已经在这个问题上查了几十个教程,并且无法获得任何工作.有任何想法吗？

我的容器组件如下所示：

<Container className="contact-content debug-border">
    <Row className="justify-content-center">
        <Col md={2} className="text-center text-md-right">
            Phone:
        </Col>
        <Col md={3} className="text-center text-md-left">
            XXXXXXXXX
        </Col>
    </Row>
    <Row className="justify-content-center">
        <Col md={2} className="text-center text-md-right">
            Email-ID:
        </Col>
        <Col md={3} className="text-center text-md-left">
            XXXXXXXXXXX
        </Col>
    </Row>
</Container>

我的CSS如下：

.contact-content{
    height: 83vh;
}

.debug-border{
    border: 2px;
    border-style: dashed;
}

它看起来是这样的： 我想要的是电话和电子邮件数据的行和列显示在页面中间

我尝试过的：

我尝试向容器添加类：

• 对齐内容中心
• 对齐项目中心
• 内容居中对齐
• 项目中间对齐
• 中间对齐
• 我的汽车
• py自动

它对网页的外观没有任何影响。

我将 padding:40vh 添加到 contact-content css 类中，它起作用了，但我想知道 bootstrap 中是否有任何类可以将容器内的行和列与页面中间对齐。

我想重新创建这样的东西：

然后我会将它用于社交媒体和外部网站 :) 这就是我能想到的：

如您所见，这里有两个问题：

1. 图片不适合div。
2. 文字不在中间。

我想如果我可以将文本与中心对齐，图片也会自动适合，但我似乎无法做到。

这是我写的代码：

.child {
  height: 250px;
  margin: 20px;
}

.external-links {
  display: table-cell;
  background: #ccc;
  vertical-align: middle;
  text-align: center;
  border-radius: 32px;
  color: black;
  text-decoration: none;
  padding: 1px;
}

<div class="child">
  <a class="external-links" href="https://github.com/amirashabani" target="_blank">
    <img src="{% static 'app/images/icons/github.ico' %}">
    <span>github</span>
  </a>
  <a class="external-links" href="https://twitter.com/amirashabani" target="_blank">
    <img src="{% static 'app/images/icons/twitter.ico' %}">
    <span>twitter</span>
  </a>
  <a class="external-links" href="https://stackoverflow.com/users/6282576/amir-a-shabani" target="_blank">
    <img src="{% static 'app/images/icons/stackoverflow.ico' %}">
    <span>stackoverflow</span>
  </a>
</div>

我认为vertical-align: middle;&的两行text-align: center;会使文本居中，但事实并非如此。

我们在带有 taillwindcss 的 div 元素内有一个 span 文本，将文本与 div 垂直对齐的最佳方法是什么？

<div class="h-64 w-64 flex flex-col align-items justify-center">
   <span>Home</span>
</div>

如何将子元素与具有动态高度的父元素垂直对齐.

CSS代码:

parent{
    height: 400px;
}
.child{
    position:relative;
    top:50%;
    transform: translateY(-50%;);
}

这会将孩子设定一次,然后不会改变.如何更改它以使其随父项的动态高度而变化？

如何在不改变输入高度的情况下垂直对齐输入中的字符/文本(它必须精确到28px)？输入有这个CSS,所以我不明白为什么它有一些padding-top(？):

input {
    font-family: arial;
    font-size: 28px;
    line-height: 28px;
    height: 28px;
    padding: 0;  
    border: none;
    outline: none;
    background-color:#cdcdcd;
}

<input value="asdg">

一些字母如g,p和q被切断了

删除边距底部没有帮助.

https://jsfiddle.net/4rtL6415/

我有一个包含一些内容的div.它的高度为31px,在其内部,按钮的高度较小.

<div class="headerAndButton">
    <h3 class="h3">
        Click the button to the right
        <button>click me</button>
    </h3>
</div> 

我有另一个没有按钮的标题.

<div class="headerAndButton">
    <h3 class="h3">No button here, I only want to have this header have the same vertical alignment, height and margin as the other header</h3>
</div>

我想垂直对齐<h3>每个div中的文本.我试图通过以下SCSS解决问题:

.headerAndButton {
  margin-bottom: $space-300;

  h3 {
    min-height: 31px;
    vertical-align: bottom;

    button {
      margin-left: $space
    }
  }
}

该vertical-align物业没有明显效果.没有底部的文字是顶部对齐的.另一个文本略低一些.如果我删除按钮,它也会变为顶部对齐.

如何使此标题具有相同的垂直对齐方式？我不擅长CSS,所以也许有更好的方法可以解决这个问题.

我是一个HTML/CSS新手,而div中的元素垂直对齐让我发疯.基本上,我有一个div包含文本和图像的混合,我想要做的就是垂直对齐ediv中间的元素.

根据这篇文章:

内联元素(以及仅内联元素)可以通过vertical-align:middle在其上下文中垂直对齐.但是,"上下文"不是整个父容器高度,而是它们所在文本行的高度.

所以,我创建一个SPAN和事件集,diplay: inline但没有任何作用:

<div id="main_section" class="main_align" >
    <span class="inline">
        <span class="inline"><img src="http://placehold.it/50x50" /></span>
        &nbsp;
        <span class="small inline">A Very Small Text</span>
        &nbsp;
        <span class="medium inline">Medium String</span>
    </span>
</div>

这是jsfiddle.

任何指针将不胜感激.

注意:如果在Chrome和Firefox中有效,我很高兴.无需解决IE特定问题.