visual studio code如何讓圖片跟字對齊跟main如何置中

visual studio code

yonghaow88 2023-09-07 11:37:09 ‧ 543 瀏覽

分享至

        body > nav{
            background-color: #369;
            color: #fff;
            height: 60px;
            position: sticky;
            top: 0;

        }
        main{
            background-color: #e1b8f3;
            min-height: 150px;
            overflow: hidden;
        }
        main aside{
            background-color: #e7a8a8;
            float: right;
            width: 20%;
            padding: 20px;
            margin-left: 285px;
        }
        .content{
            background-color: #f8fc9e;
            float: left;
            width: 70%;
            padding: 18px;
            margin: 2% 2%;
            
        }
        figure{
            background-color: #f0d6fd;
            width: 40%;
            height: 150px;
            margin: 4%;
            float: right;
        }
        .gomore{
            background-color: darkblue;
            color: white;
            text-decoration: none;
            padding: 20px;
            display: block;
            clear: both;
            float: left;
        }
        .gomore p{
            background-color: black;
            color: white;
            padding: 10px;
            position: absolute;
            right: 0;
            top: 0;
            width: 250px;
            transform: translateY(calc(-100% -15px));
            display: none;
        }
        .gomore p::after{
            content: '';
            display: block;
            width: 0;
            height: 0;
            border: 15px solid transparent;
            border-top-color: black;
            position: absolute;
            right: 0;
            bottom: 0;
            transform: translate(-30px,28px);
        }
        .gomore:hover p{
            display: block;
        }
        footer{
            background-color: #d5f3b8;
            text-align: center;
            padding: 1em;
        }
        img{
            background-color: #fff;
            width: 300px;
            padding: 30px;
            margin: 30px;
            float: left;
            /* display: inline-block; */
            /* display: inline; */
        }
        </style>
</head>
<body>
    <header>
        <div class="Logo">Logo</div>
        <nav>
            <a href="">回首頁</a>
            <a href="">button1</a>
            <a href="">button2</a>
            <a href="">button3</a>
            <a href="">button4</a>
            <a href="">button5</a>
        </nav>
    </header>
    <main>
        <div class="content">
            <img src="./images/01.jpg">
            
            <h1>BAS建築自動化系統</h1>
            <figure>介紹內容 Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                Velit ut fugiat neque. Dolorum voluptatum eum voluptas facere doloribus aliquam, illum officia aspernatur, ipsam, sit ducimus molestiae sunt dignissimos. 
                Necessitatibus, nihil.
            </figure>
            <aside><a href=""><span class="btn">ITsESG</span><span>手冊下載</span></a></aside>
        </div>
    </main>
    
    <footer>
        <p>Copyright © 2023 ITsESG</p>
    </footer>


</body>

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

janlin002

iT邦好手 1 級 ‧ 2023-09-07 11:54:36

最佳解答

圖片跟字對齊: 是要以誰為基準？(圖片？文字？)
main如何置中: main就是最外層了

回應 3
分享
檢舉

yonghaow88 iT邦新手 3 級 ‧ 2023-09-07 11:56:50 檢舉

main我會了，文字太高想對齊圖片

janlin002 iT邦好手 1 級 ‧ 2023-09-07 16:36:05 檢舉

figure{
    background-color: #f0d6fd;
    width: 40%;
    height: 150px;
    margin-top: auto;
    margin-bottom: auto;
    float: right;
}

yonghaow88 iT邦新手 3 級 ‧ 2023-09-07 20:02:42 檢舉

謝謝

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22209 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙

visual studio code如何讓圖片跟字對齊跟main如何置中

1 個回答

我要發表回答

標記使用者