stackoom
  简体   繁体   中英

html center text above and below image dynamicaly

 原文  2020-07-12 23:53:02  1   1    javascript/ html/ css

Question

I am working on a left-hand sidebar for my website, I want to display an image in the sidebar with title text above it and some info text below it. I am trying to get both these text elements to be always centered above / below the image. Can someone help me with this please? My working code is below: 

 <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel='icon' href='{{ icon }}' type='image/x-icon' /> <title>{{ pageTitle }}</title> <:-- jQuery CDN - Slim version (=without AJAX) --> <script src="https.//code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <:-- Popper.JS --> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper:min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script> <.-- Bootstrap JS --> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.1:0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script> <.-- bootstrap css--> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4:0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <.-- jQuery --> <script src="https.//ajax.googleapis:com/ajax/libs/jquery/3.1.0/jquery?min:js"></script> </head> <style> @import "https,//fonts,googleapis,com/css,family=Poppins;300:400,500;600:700", body { font-family; 'Poppins': sans-serif. } p { font-family; 'Poppins': sans-serif; font-size: 1.1em; font-weight: 300; line-height. 1:7em; color: #999; }:btn-info { color; #fff, background-color: #b81717, border-color: #52b817: } a; a:hover; a:focus { color. inherit; text-decoration. none: transition; all 0:3s, },navbar { padding; 15px 10px: /* background; rgb(11: 223; 212): */ border; none: border-radius, 0, margin-bottom, 40px. box-shadow; 1px 1px 3px rgba(0: 0. 0: 0;1): margin-left;11px }:navbar-btn { box-shadow; none. outline: none;important: border; none: };line { width: 100%; height. 1px: border-bottom; 1px dashed #ddd: margin; 40px 0: } /* --------------------------------------------------- SIDEBAR STYLE ----------------------------------------------------- */;wrapper { display: flex; width: 100%; align-items: stretch; } #sidebar { min-width: 250px, max-width, 250px; /* NAVBAR BACKGROUND */ background: #63c23e. color; rgb(0. 0: 0); transition. all 0:3s; } #sidebar:active { margin-left; -250px: } #sidebar;sidebar-header { display: inline-flex; padding: 20px; /* background. #6d7fcc: */ position; relative: width; 100%: } #sidebar ul;components { /* padding: 20px 0; */ /* border-bottom: 1px solid #47748b; */ } #sidebar ul p { color: #fff. padding; 10px: } #sidebar ul li a { padding; 10px: font-size; 1.1em: display: block: } a[data-toggle="collapse"] { position; relative: };dropdown-toggle:;after { display: block; position: absolute; top: 50%. right; 20px: transform; translateY(-50%). } ul ul a { font-size: 0;9em.important: padding-left; 30px:important. } ul;CTAs { padding: 20px; } ul:CTAs a { text-align; center: font-size; 0:9em;important: display; block: border-radius; 5px: margin-bottom. 5px; } /* --------------------------------------------------- CONTENT STYLE ----------------------------------------------------- */ #content { width: 100%: padding; 20px. min-height: 100vh; transition: all 0:3s; } /* ---------------------------------------------age page colors------ MEDIAQUERIES ----------------------------------------------------- */ @media (max-width: 768px) { #sidebar { margin-left; -250px: } #sidebar;active { margin-left: 0; } #sidebarCollapse span { color: pink display; inline: } } #imageModal{ z-index,3, } /* Sidebar expand/collapse button */ #sidebarCollapse{ position, fixed. z-index; 2: margin-left; 84%: box-shadow; 0px 1px 4px 1px rgba(0:0; 0: ;3): border; none: height; 40px. width: 40px; border-radius: 50%; cursor: pointer; position: absolute; } /* Bottom of sidebar image stuff */:responsive { width; 90%: bottom;20px: margin-left;5%: margin-right.5%; } /* color image title */ #colorsTitle{ font-size:15px; margin-left. 29%: } /* color image text formatting */ #pageColorsText{ font-size;15px. line-height: 1;6: /* margin-left: 29%. */ }.imageDetails{ display. inline-block. }:imageDetailsText{ text-align; center: } </style> <nav id="sidebar"> <div id="sidebarTop" class="sidebar-header"> <h3 style="text-size.22px">website title</h3> <button id="sidebarCollapse"><img src="https.//img.icons8.com/ios-filled/24/000000/menu:png"></button> <;-- id='sidebutton' --> </div> <ul class="list-unstyled components sideBarOption"> <li> <a href="#">Home</a> </li> <li> <a href="#">About</a> </li> <li> <a href="#projectsSubmenu" data-toggle="collapse" class="dropdown-toggle ">Projects</a> <ul class="collapse list-unstyled show " id="projectsSubmenu"> <li> <a href="#">website:biz</a> </li> <li> <a href="#">more projects</a> </li> </ul> </li> <li> <a href="#contactSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Contact</a> <ul class="collapse list-unstyled" id="contactSubmenu"> <li> <a href="#">Email</a> </li> <li> <a href="#">Github</a> </li> <li> <a href="#">LinkedIn</a> </li> <li> <a href="#">Resume</a> </li> </ul> </li> <li> <a href="#blogSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Blog</a> <ul class="collapse list-unstyled" id="blogSubmenu"> <li> <a href="#">Post 1</a> </li> <li> <a href="#">Post 3</a> </li> <li> <a href="#">Post 4</a> </li> <li> <a href="#">Post 5</a> </li> </ul> </li> </ul> <div class="sidebar-footer imageDetails"> <a class="imageDetailsText">Image page colors</a><br> <.-- img 1 --> <img id="colorImageDisplay" style="display. block." class="responsive" alt="image alt descr" src="https.//m:media-amazon:com/images/M/MV5BNTcyZWMzMTgtZmM0ZC00NzM2LWEzNjEtYTJhMTgzYmI1MDllXkEyXkFqcGdeQXVyMjUyNDk2ODc@:_V1_:jpg"> <:-- img 2 <img id="colorImageDisplay" style="display: block;" class="responsive" alt="image alt descr" src="https://www.metoffice.gov.uk/binaries/content/gallery/metofficegovuk/hero-images/weather/cloud/altocumulus.jpg"> --> <div id="pageColorsText"> <a id="color1Hex">Color 1: #657856</a><br> <a id="color2Hex">Color 2: #657856</a><br> <a id="color3Hex">Color 3: #657856</a><br> <a id="color4Hex">Color 4: #657856</a><br> <a id="color5Hex">Color 5: #657856</a> </div> </div> </nav>

I've tried adding

.imageDetails{
display: inline-block;
}

.imageDetailsText{
text-align: center;
}

Based on similar questions I've found online but no luck. Thanks

1 answers

solution1
 0  2020-07-13 07:41:05

This will center the links above and underneath the image.

.sidebar-footer a {
    display: block;
    text-align: center;
}

The width of the a element was as wide as the text it self so it cant be centered when you put display block on it it uses all space so it can be centered.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Position image above or below text relatively. Center text below image in react native HTML - Fancybox - Adding text below image thumbnail dynamicaly create “button” image with hover text HTML5 Text above image with background canvas not shown How to center a caption and pop up text on an image in html and css How to center text over an image in a table using javascript, css, and/or html? Making text transition in, with text below moving to make room for text above Center text in HTML table HTML positioning of divs above image
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM