我正在尝试垂直居中围绕＆＃39;关于＆＃39; div类包含3个段落。边界太高，我想把它向下移动到垂直居中。我可以调整高度，但我根本无法移动边框。
openModal
|builder dialog content login|
builder := UITheme builder.
content := (builder newLabelGroup: {
'Login' -> (login := (builder
newTextEntryFor: contact
getText: #login
setText: #login:
help: 'Enter the login of the user')
acceptOnCR: false;
minWidth: 200).
'Full name' -> ((builder
newTextEntryFor: contact
getText: #fullName
setText: #fullName:
help: 'Enter the full name of the user.')
acceptOnCR: false;
minWidth: 200).
'Password' -> ((builder
newTextEntryFor: contact
getText: #password
setText: #password:
help: 'Enter the password of the user.')
acceptOnCR: false;
minWidth: 200)
}).
dialog := builder newPluggableDialogWindow:'Edit contact' for: content.
dialog rememberKeyboardFocus: login.
builder openModal: dialog.
这是CSS
callbackState如果不查看jsfiddle上的完整代码，很难想象我需要什么：https://jsfiddle.net/njh5scyd/
请帮忙！一直试图弄明白......
谢谢
答案 0 :(得分：4)
您应该使用:after和:before伪元素：
/*main.css*/
html, body, h1, h2, h3, h4, div, p, ul, ol, li {
padding: 0;
border: 0;
margin: 0;
font: inherit;
font-size: 100%;
font-family: 'Helvetica Neue', 'Helvetica', 'sans-serif';
color: white;
background-color: black;
}
h1 {
font-size: 70px;
font-weight: bold;
text-align: center;
}
h2 {
font-size: 22px;
font-weight: 200;
text-align: center;
border-bottom: 1px solid white;
padding-bottom: 10px;
}
h2 strong {
font-weight: 500;
}
.tagline {
padding: 15px 0 25px 0;
width: 700px;
margin: 0 auto;
}
.links ul li {
display: inline;
padding: 20px;
font-weight: bold;
}
.links {
text-align: center;
}
.links a {
text-decoration: none;
color: white;
text-decoration: underline;
}
.about {
width: 500px;
text-align: center;
margin: auto;
padding-top: 50px;
padding-right: 15px;
padding-left: 15px;
position: relative;
}
.about:before {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
height: 50%;
border-left: 1px solid white;
content: '';
}
.about:before {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
height: 50%;
border-right: 1px solid white;
content: '';
}<body>
<div class='header'>
<h1>Daffy Duck</h1>
</div>
<div class='tagline'>
<h2>fdsfsdfsdfsdfds <strong>fewfwefwef</strong> fdsfdsfsdf <strong>sdfdfsf</strong></h2>
</div>
<div class='links'>
<ul>
<li><a href='file:///Users/Frank/Desktop/moee.html' target='_self'>Home</a></li>
<li><a href='file:///Users/Frank/Desktop/javascrip.html' target='_self'>Portfolio</a></li>
<li>Resume</li>
<li><a href='file:///Users/Frank/Desktop/game.html' target='_self'>About</a></li>
<li>Why Me</li>
</ul>
</div>
<div class='about'>
<p>
JavaScript (/ˈdʒɑːvəˌskrɪpt/[5]) is a high-level, dynamic, untyped, and interpreted programming language.[6] It has been standardized in the ECMAScript language specification.[7] Alongside HTML and CSS, it is one of the three essential technologies of World Wide Web content production; the majority of websites employ it and it is supported by all modern web browsers without plug-ins.
</p>
<br>
<p>
Despite some naming, syntactic, and standard library similarities, JavaScript and Java are otherwise unrelated and have very different semantics. The syntax of JavaScript is actually derived from C, while the semantics and design are influenced by the Self and Scheme programming languages.
</p>
<br>
<p>
JavaScript is also used in environments that are not web-based, such as PDF documents, site-specific browsers, and desktop widgets. Newer and faster JavaScript virtual machines (VMs) and platforms built upon them have also increased the popularity of JavaScript for server-side web applications.
</p>
<br>
</div>
</body>
答案 1 :(得分：1)
200px元素的固定高度为.about。除非你有明确的目的，否则你应该删除它。如果您这样做，您的.about元素将自然延伸并正确包裹其中的内容。
这自然会影响您的边框，边框与您的.about元素直接相关。 .about的高度与您的边界有直接关系，边界围绕.about元素。高度比内容小？边界的高度也较小。
如果您对此有任何疑问或需要更多信息，请与我们联系。
html {
background-color: black; /* added for testing purposes only */
}
.about {
color: white; /* added for testing purposes only */
width: 500px;
text-align: center;
margin: auto;
padding-top: 50px;
border-right: 1px solid white;
border-left: 1px solid white;
padding-right: 15px;
padding-left: 15px;
}<div class='about'>
<p>
JavaScript (/ˈdʒɑːvəˌskrɪpt/[5]) is a high-level, dynamic, untyped, and interpreted programming language.
</p>
<br>
<p>
Despite some naming, syntactic, and standard library similarities, JavaScript and Java are otherwise unrelated and have very different semantics.
</p>
<br>
<p>
JavaScript is also used in environments that are not web-based, such as PDF documents, site-specific browsers, and desktop widgets.
</p>
<br>
</div>
答案 2 :(得分：1)
您可以在Files.walk上绘制边框并删除这些<p>：https://jsfiddle.net/njh5scyd/3/
<br> .about {
width: 500px;
text-align: center;
margin: auto;
padding-top: 50px;
}
.about p {
border-right: 1px solid white;
border-left: 1px solid white;
padding: 15px;
margin:0;
}
也可以帮助调整此问题：https://jsfiddle.net/njh5scyd/4/
background-image/background-size答案 3 :(得分：0)
很简单。只需更改.about的样式，如下所示：
.about {
width: 500px;
text-align: center;
margin: auto;
padding-top: 50px;
/*border-right: 1px solid white;
border-left: 1px solid white;*/
padding-right: 15px;
padding-left: 15px;
/*height: 200px;*/
position:relative;
}
然后在下面添加新样式。
.about::before,.about::after{
content:" ";
width:1px;
height:200px;
top:calc(50% - 100px);
left:0;
position:absolute;
background:#FFFFFF;
}
.about::after{
right:0;
left:initial;
}