Html 如何使此段落元素向上移动？_Html_Css_Margin_Move

Html 如何使此段落元素向上移动？

html css

Html 如何使此段落元素向上移动？,html,css,margin,move,Html,Css,Margin,Move,我把这些都写出来了，除了最后的元素外，一切都很完美。我想将它向上移动到由类为“defaultButtonStyle”的div创建的蓝色矩形的中心。我尝试在css中使用边距顶部，但没有效果。你还有别的想法吗 <style> body {background-color: #ebf0f3;} .mainPicture img {height: 400px; width:600px; } #gallery {position: relative; } #gallery ul {li

我把这些都写出来了，除了最后的元素外，一切都很完美。我想将它向上移动到由类为“defaultButtonStyle”的div创建的蓝色矩形的中心。我尝试在css中使用边距顶部，但没有效果。你还有别的想法吗

<style>
body {background-color: #ebf0f3;}
.mainPicture img {height: 400px;
    width:600px; }
#gallery {position: relative; }
#gallery ul {list-style-type: none;
    width: 236px; 
    margin-left: -33px;
    margin-top: -15px; }
#gallery li { display: inline; 
     float: left;
     padding: 0px; }
#gallery img {border-style: solid: 10px; border-color: #ebf0f3; }
#gallery a { text-decoration: none;
             font-style: none;  
             color: #333; }
.popOut {cursor: default;
    list-style: none; }
.popOut a {cursor: default; }
.popOut a .preview {display: none; }
.popOut a:hover .preview {display: block;
    position: absolute;
    top: -20px;
    left: -45px;
    z-index: 1; }
.popOut img {background: #ebf0f3;
    border-color: #ebf0f3;
    border-style: solid;
    border-width: 2px;
    color: inherit;
    vertical-align: center;
    width: 100px;
    height: 67px; }
.popOut li {background-color: none;
    border-color: #ebf0f3;
    border-style: solid;
    border-width: 0px;
    color: inherit;
    display: inline;
    float: left;
    margin: 3px;
    padding: 0px;
    position: relative; }
.popOut .preview {border-color: #000;
    width: 200px;
    height: 134px; }
.popOut p {text-align: center; }
.defaultButtonStyle {background: #ebf0f3;
    border-color: #ebf0f3;
    border-style: solid;
    border-width: 1px;
    color: inherit;
    vertical-align: top;
    width: 212px;
    height: 38px;
    margin-top: -43px;
    text-align: center; }
.defaultButtonStyle p .defaultImageText {top-margin: 100px; }
.popOut .center {align: center; }
#rightcol {margin-left: 237px;}
#rightcol .fixThisHeight {
    margin-top: 18px; }
</style>
<div id="container">
    <div class="mainPicture">
        <img alt="" id="JudgeBench" name="JudgeBench" src="http://PATH/files/pictures/JudgeBench.jpg" />
    </div>
    <div id="gallery">
        <ul class="popOut">
            <li>
                <a href="http://PATH/files/pictures/PodiumPlain3.html" target="AdditionalInfo" onClick="document.JudgeBench.src='http://PATH/files/pictures/PodiumPlain.jpg'">
                    <img alt="PodiumPlain" src="http://PATH/files/pictures/PodiumPlain.jpg" /><img alt="PodiumPlain" class="preview" src="http://PATH/files/pictures/PodiumPlain.jpg" />
                </a>
            </li>
            <li>
                <a href="http://PATH/files/pictures/PodiumRack4.html" onClick="document.JudgeBench.src='http://PATH/files/pictures/PodiumRack.jpg'" target="AdditionalInfo">
                    <img alt="PodiumRack" src="http://PATH/files/pictures/PodiumRack.jpg" /><img alt="PodiumRack" class="preview" src="http://PATH/files/pictures/PodiumRack.jpg" />
                </a>
            </li>
            <li>
                <a href="http://PATH/files/pictures/CounselTable3.html" onClick="document.JudgeBench.src='http://PATH/files/pictures/CounselTable.jpg'" target="AdditionalInfo">
                    <img alt="CounselTable" src="http://PATH/files/pictures/CounselTable.jpg" /><img alt="CounselTable" class="preview" src="http://PATH/files/pictures/CounselTable.jpg" />
                </a>
            </li>
            <li>
                <a href="http://PATH/files/pictures/PlasmaScreens3.html" onClick="document.JudgeBench.src='http://PATH/files/pictures/PlasmaScreens.jpg'" target="AdditionalInfo">
                    <img alt="PlasmaScreens" src="http://PATH/files/pictures/PlasmaScreens.jpg" /><img alt="PlasmaScreens" class="preview" src="http://PATH/files/pictures/PlasmaScreens.jpg" />
                </a>
            </li>
            <li>
                <a href="http://PATH/files/pictures/Stream_Projector3.html" onClick="document.JudgeBench.src='http://PATH/files/pictures/Stream_Projector.jpg'" target="AdditionalInfo">
                    <img alt="Stream_Projector" src="http://PATH/files/pictures/Stream_Projector.jpg" /><img alt="Stream_Projector" class="preview" src="http://PATH/files/pictures/Stream_Projector.jpg" />
                </a>
            </li>
            <li>
                <a href="http://PATH/files/pictures/AudioAids3.html" onClick="document.JudgeBench.src='http://PATH/files/pictures/AudioAids.jpg'" target="AdditionalInfo">
                    <img alt="AudioAids" src="http://PATH/files/pictures/AudioAids.jpg" /><img alt="AudioAids" class="preview" src="http://PATH/files/pictures/AudioAids.jpg" />
                </a>
            </li>
        </ul>
        <div id="rightcol">
            <iframe width="360px" height="319px" class="fixThisHeight" id="AdditionalInfo" name="AdditionalInfo" src="http://PATH/files/pictures/JudgeBench2.html" title="Information About Courtroom Technology"></iframe>
        </div>
        <div id="defaultButtonDiv" class="defaultButtonStyle">
            <a href="http://PATH/files/pictures/JudgeBench2.html" onClick="document.JudgeBench.src='http://PATH/files/pictures/JudgeBench.jpg'" target="AdditionalInfo">
                <img alt="Default Image" class="DefaultImage" "http://PATH/files/pictures/DefaultImageFinal.jpg" />
                    <div id="MoveTheTextAround" class="MoveTheTextAround">
                        <p class="defaultImageText">Default Image</p>
                    </div>
            </a>
        </div>
    </div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<p>Just some text</p>


正文{背景色：#ebf0f3；}
.main图片img{高度：400px；
宽度：600px；}
#库{位置：相对；}
#库ul{列表样式类型：无；
宽度：236px；
左边距：-33px；
页边距顶部：-15px；}
#画廊展示：内联；
浮动：左；
填充：0px；}
#图库img{边框样式：实心：10px；边框颜色：#ebf0f3；}
#画廊a{文字装饰：无；
字体样式：无；
颜色：#333；}
.popOut{cursor:默认值；
列表样式：无；}
.popOut a{cursor:default；}
.popOut a.preview{display:none；}
.popOut a:hover.preview{display:block；
位置：绝对位置；
顶部：-20px；
左：-45px；
z-索引：1；}
.popOut img{背景：#ebf0f3；
边框颜色：#ebf0f3；
边框样式：实心；
边框宽度：2倍；
颜色：继承；
垂直对齐：居中；
宽度：100px；
高度：67px；}
.popOut li{背景色：无；
边框颜色：#ebf0f3；
边框样式：实心；
边框宽度：0px；
颜色：继承；
显示：内联；
浮动：左；
保证金：3倍；
填充：0px；
位置：相对；}
预览{边框颜色：#000；
宽度：200px；
高度：134px；}
.popOut p{text align:center；}
.defaultButtonStyle{背景：#ebf0f3；
边框颜色：#ebf0f3；
边框样式：实心；
边框宽度：1px；
颜色：继承；
垂直对齐：顶部；
宽度：212px；
高度：38px；
利润上限：-43px；
文本对齐：居中；}
.defaultButtonStyle p.defaultImageText{上边距：100px；}
.popOut.center{align:center；}
#右列{左边距：237px；}
#右Col.固定此高度{
页边距顶部：18px；}































只是一些文字

老实说，我还没有找到解决方案，因为我不明白你想要什么元素，在哪里。。图像无法显示，因为它们链接到未知源

然而，你的利润率不合格的一个原因可能是因为它不应该如此

.defaultButtonStyle p .defaultImageText *{top-margin: 100px; }*

应该是

.defaultButtonStyle p .defaultImageText {margin-top: 100px; }

试一试。

老实说，我还没有找到解决方案，因为我不明白你想要什么元素，在哪里。。图像无法显示，因为它们链接到未知源

然而，你的利润率不合格的一个原因可能是因为它不应该如此

.defaultButtonStyle p .defaultImageText *{top-margin: 100px; }*

应该是

.defaultButtonStyle p .defaultImageText {margin-top: 100px; }

试试看。

那就行了。我觉得自己超级笨，尤其是因为我在其他地方正确地格式化了页边距。那就行了。我觉得自己超级笨，尤其是因为我在其他地方正确地格式化了页边距。