我遇到以下情况，当文本不再适合容器时，该文本会在顶部被截断。我该如何解决？如果文本比容器小，我仍然希望文本居中，并且我不能更改容器的大小。
div {
display: flex;
align-items: center;
width: 100px;
height: 50px;
overflow: auto;
word-break: break-word;
}<div>
sdjhfkahsdkjfadsfhk jaskjfsj fsldflkasjklsjflakj flksjfakljflksjflkasfjklasjflfd
</div>我正在尝试创建一个没有固定高度父级的滚动元素。我希望#SECTION1我的代码可以滚动以显示其余的图像。我似乎找不到办法做到这一点。我试图设置#SECTION1一个固定的高度，但它迫使我的图像被压扁。任何帮助，将不胜感激。谢谢你。
这是我的代码：
* {
box-sizing: border-box;
margin: 0;
padding: 0;
text-decoration: none;
}
::-webkit-scrollbar {
width: 15px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
html,
body {
margin: 0;
padding: 0;
height: 100vh;
overflow: hidden;
}
/*----------SECTION 1----------*/
header {
height: 80px;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
#header-wrapper {
display: …我尝试使用flexbox方法,表格方法和其他一些方法垂直居中一个未知高度的div,但我的div没有正确居中.我希望居中div的宽度为窗口宽度的50%或最小宽度为200px.
.content {
background-color: violet;
min-width: 200px;
width: 50%;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 1px 7px 1px rgba(0, 0, 0, 1);
}
.outer-container {
display: table;
width: 100%;
background-color: violet;
}
.container {
display: table-cell;
text-align: center;
vertical-align: middle;
}<body>
<div class="outer-container">
<div class="container">
<div class="content">
<div class="title-class">
Hello there
</div>
</div>
</div>
</div>
</body>我使用以下HTML结构:
<div class="imgview_overlay" id="imageviewer">
<div class="overlay_content">
<div class="overlay_inner" id="overlay_img_div">
<img id="overlay_img" alt="overlayed_image" style="visibility: hidden;" />
</div>
</div>
</div>
使用以下CSS:
.imgview_overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.2); visibility: hidden; z-index: 500; }
.overlay_content { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; overflow: auto; }
.overlay_inner { display: inline-block; }
将<img>标签水平和垂直居中放置在叠加层内.
在overflow: auto;它的工作,但不正确.图像的顶部(当页面缩小时)不会出现.举个例子,看看这个小提琴.关于如何解决这个问题的任何想法？
我想要实现的是，当视口比内容高时，内容应该垂直居中。当视口不够高并且内容溢出时，父级应该提供垂直滚动条。
当我将 Flexbox 内容对齐到中间并将内容设置为滚动时，它不仅会忽略内容边距，还会在顶部截断（假设视口比内容短）。有没有办法来解决这个问题？
html, body {
height: 100%;
}
body {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
overflow: hidden;
}
.container {
overflow-y: auto;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
align-items: center;
}
.content {
border: 1px solid grey;
background-color: lightgrey;
padding: 10px;
margin: 10px;
border-radius: 10px;
}<div class="container">
<div class="content">
Start of the content
<br />
<br />
Middle of the content
<br />
<br />
End of the content
</div>
</div>
<div class="container">
<div class="content">
Start …Flex-end适用于chrome和firefox，但不适用于即浏览以下代码
.flex-container { display: flex;
flex-wrap: nowrap;
background-color: DodgerBlue; flex-direction: column;flex-flow:column;
justify-content: flex-end;height:100px
}<h1>Flexible Boxes</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<p>Try to resize the browser window.</p>
<p>A container with "flex-wrap: nowrap;" will never wrap its items.</p>
<p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 or earlier versions.</p>我的一个项目遇到了问题。我将容器设置为 100vh 和 100vw，并将溢出设置为“自动”。然而，即使有了这些高度和宽度属性以及溢出，元素似乎仍然被推出 div，我不确定为什么。例如，在这个 div 中我有一个 h1 和一个图像。我将 h1 显示在图像上方；当我的屏幕高度太小时，我希望用户能够滚动。然而，即使设置了溢出，h1 也会完全推到页面上方，因此看不到它，也无法向上滚动，只有图像及其下面的所有内容可以滚动。
我的 JSX：
<div id="SingleProjectContainer">
<h1>{name}</h1>
{images.map((image, idx) => (
<div key={idx}>
<img src={image} alt="Project Picture" />
</div>
))}
</div>
和我的CSS：
#SingleProjectContainer {
top: 0;
padding: 10px;
margin: 0;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
flex-direction: column;
overflow: auto;
flex: auto;
}
#SingleProjectContainer h1 {
font-size: 3em;
margin: 10px;
color: white;
}
我尝试了许多位置和保证金设置的组合，但似乎没有任何效果。我不确定是否还缺少另一个 css 属性。任何帮助将不胜感激！