相关疑难解决方法(0)
垂直对齐div中的多行文本
我正在编写RSS解析器,我使用Ractive生成视图.我正在尝试根据.feed-item的高度垂直对齐.feed-text-offset的内容.
我怎么能做到这一点？
演示:https://jsfiddle.net/zzx5L4e9/
输出HTML是这样的:
<div class="feed-item">
<div class="news-img-container">
<img class="news-thumbnail" src="#" style="max-width: 125px;">
</div>
<div class="feed-text-offset">
<a href="#" target="_blank">Text here</a>
<span class="feed-item-since">1 hr</span></div>
<div style="clear: both;">
</div>
</div>
CSS
.feed-item {
padding: 2px;
background-color: green;
float:left;
}
.feed-item-since {
font-size: 0.8em;
font-weight: 400;
margin-top: 5px;
display: block;
}
.news-img-container {
width: 125px;
float: left;
}
.feed-text-offset {
margin-left: 130px;
}
推荐指数
解决办法
查看次数
在不使用绝对定位的情况下垂直居中div？
我希望div垂直和水平居中.但是,当我使用包装器(relative) -->container (absolute)解决方法时,底部的页脚一直被推到屏幕顶部,然后我根本无法移动页脚.那么,如何在不使用绝对定位的情况下垂直和水平对齐棕褐色盒子？
HTML:
<body>
<div id="wrapper">
<div id="container">
<div id="menu">
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>
</div>
<div id="fullerton" class="clearfix">
<a href="#"><img src="<?php echo get_template_directory_uri(); ?>/images/fullertonmenu.png" /></a>
</div>
<div id="logo" >
<img src="<?php echo get_template_directory_uri(); ?>/images/HB-Logo.png" />
</div>
<div id="comingsoon">
<a href="#"><img src="<?php echo get_template_directory_uri(); ?>/images/comingsoon.png" /></a>
</div>
<?php endwhile; ?>
</div>
</div>
<div id="footer"><!-- Footer Content Begins Here -->
<p>© <?php bloginfo('name'); ?>, by lapetitefrog</p>
</div>
</body>
CSS:
body {
text-align: center;
padding: 0;
margin: 0 auto; …推荐指数
解决办法
查看次数
垂直居中项目，没有绝对位置或弹性盒
我有三个 div，我想垂直排列，不幸的是，我找到的每个解决方案都只使用position:absolute或 flexbox 中的一个，而我不能使用其中任何一个，因为它会影响页面上我无法控制的其他内容。目前这是我的代码：
<div
class="search-wrapper text-center "
style=""
>
<div
class="col-md-7 perfect-vacation white "
style="font-family:lora;letter-spacing:0px;font-style:italic;font-size:clamp(1.3rem, 3.9vw, 2.9em);white-space:nowrap;"
>
<div> find your perfect cruise vacation</div>
</div>
<div id="search-cruises" class=" col-md-2" style="">
<a
href="/search-cruise/cruises"
class="green-btn button"
data-track="search-track"
data-track-id="search-widget"
style="background:#6D9D5B;padding:10px;
border-color:#6D9D5B;font-size:clamp(1.1em, 1vw, 1.4em);white-space:nowrap;"
>
Search Cruises
</a>
</div>
<div class="col-md-3" style="">
<a
class="white recent-cruise "
style="font-family:Roboto;white-space:nowrap;font-size:clamp(.8em, 1vw, 1.4em);color:white;overflow:visible;"
>
See Recently Viewed Cruises
</a>
</div>
</div>
看起来像这样（没有红线），我希望所有 3 个项目都与红线对齐。任何建议将不胜感激。
推荐指数
解决办法
查看次数
CSS文本垂直对齐中心不居中
重要:
我的帖子(通常)不重复.我发现这个,这个,这个和这个堆栈溢出后(也有可能所有重复).我尝试这个帖子最常见的答案,但它不起作用.我也试过其他方法,但我无法达到目标.
所以,我有一个带文字的大div:
html, body {
height: 100%;
}
#dimScreen {
width: 100%;
height: 100%;
background:rgba(0,0,0,0.5);
}
h1 {
font-size:350%;
}<div id="dimScreen" style="text-align: center; vertical-align: center; display:inline-block;">
<h1 >Big text</h1>
</div>我的问题是,我无法想象如何将文本放在我的灰色div的中心(垂直+水平).如您所见,文本显示在div的中心(水平),但不在垂直中心.我在身体的一部分设置了中心(垂直+水平).
在我的示例中,我尝试将文本垂直对齐所有这些帖子的最常见响应,但它不起作用.我已经尝试过其他方式,我们可以在链接的问题中找到它们,但它们不起作用:我们总是有相同的结果.
我想我有这个问题,因为我在所有页面上显示我的(灰色)div.我尝试了一个普通的div并且代码有效:我的文本是垂直居中的.
简短的问题:
如何将文本垂直居中于灰色div？
如果您有疑问,请告诉我.
斯芬克斯.
推荐指数
解决办法
查看次数
如何在div中垂直对齐div？
margin: 0 auto;只要它们都具有除了之外的宽度属性auto,就可以在另一个div元素中水平对齐div元素,但这不适用于垂直对齐.
如何在另一个div中垂直对齐div？
推荐指数
解决办法
查看次数
如何在 React 中垂直对齐图标和文本？
https://codesandbox.io/embed/material-demo-g5pez?fontsize=14&hidenavigation=1&theme=dark
<span>
{
item.result.map((item, idx) => {
return <span className="legend-label">
<StopIcon />{item.metric}: {item.count}</span>
})
}
</span>
我正在渲染material-icon并在它旁边放置一个文本。但是，我不确定如何使它们与正确的做法垂直对齐。当然，我可以把top或bottom属性的风格做一个好办法，但我相信这是不是这样做的正确的做法。
在不产生不良后果的情况下，这样做的正确方法是什么？
推荐指数
解决办法
查看次数
在 React 的标题中垂直对齐 <span> 文本
我有一个看起来像这样的反应头组件：
const Header = () => {
return (
<div className="navbar">
<div className="logo-container">
<img id='logo' alt='header-logo' src={Logo}/><span id="header-title">Dashboard</span>
</div>
</div>
);
}
export default Header;
这个组件的样式表看起来像
.navbar {
height: 4em;
background-color: #f9f9f9;
width: 100%;
background: #00bceb;
}
#logo {
margin-left: 2em
}
#header-title {
display: inline-block;
vertical-align: middle;
margin-left: 0.5em;
color: #f9f9f9;
}
（我隐藏了标志）
文本未居中对齐。
有什么帮助吗？
推荐指数
解决办法
查看次数