css - Display two UL elements side by side, centered vertically and horizontally -

-

i've been struggling while , couldn't find right solution.

at bottom of page i've footer that's full width. inside want display list of messages , right next left icon, in case it's font awesome icon. message list needs centered both vertically , horizontally , icon has centered vertically.

i've tried doing using ul elements display: inline-block , text-align: center. messages displays correctly icon stuck in same place no matter size of container.

here's i've far:

<div class="error-message-container">   <ul class="error-message-bell">     <li aria-hidden="true" class="fa fa-bell-slash-o"></li>   </ul>   <ul class="error-message-list">     <li>lorem ipsum dolor sit amet, consectetur adipiscing elit</li>     <li>consectetur adipiscing elit</li>     <li>lorem ipsum dolor sit amet</li>     <li>lorem ipsum dolor sit amet, consectetur adipiscing elit</li>     <li>lorem</li>     <li>ipsum</li>   </ul> </div>

and css:

.error-message-container {         border: 1px solid blue;         bottom: 0;         color: light-blue;         font-size: 12px;         left: 0;         position: fixed;         text-align: center;         width: 100%; }  .error-message-container .error-message-bell {   display: inline-block;   font-size: 20px;   height: 100%;   margin-top: 0;   padding: 0;   vertical-align: middle; }  .error-message-container .error-message-list {   display: inline-block;   font-weight: 500;   line-height: 1.2;   list-style-type: none;   margin-bottom: 11px;   margin-top: 11px;   padding-left: 8px; }

https://jsfiddle.net/b1rw80jz/1/

does know how can accomplish this?

thanks

if need 1 icon, can use pseudo-elements::before bell

.error-message-container {         border: 1px solid blue;         bottom: 0;         color: light-blue;         font-size: 12px;         left: 0;         position: fixed;         text-align: center;         width: 100%; }  .error-message-container .error-message-list {   display: inline-block;   font-weight: 500;   line-height: 1.2;   list-style-type: none;   margin-bottom: 11px;   margin-top: 11px;   padding-left: 8px;   position: relative; /** provides reference ::before element **/ }  .error-message-list::before {   content: "\f1f6"; /** refers awesome font **/   font-family: fontawesome; /** refers awesome font **/   position: absolute; /** stick error-message-list **/   top: 50%; /** position icon 50% height of error-message-list **/   margin-top: -10px; /** minus half icon height truely vertically centered **/   left: -20px; /** push left out error-message-list **/ }

https://jsfiddle.net/b1rw80jz/6/


Comments

Post a Comment

Popular posts from this blog

Ansible - ERROR! the field 'hosts' is required but was not set -

-
i've error when launch playbook don't found why.... error! field 'hosts' required not set there main.yml : --- - hosts: hosts - vars: - elasticsearch_java_home: /usr/lib/jmv/jre-1.7.0 - elasticsearch_http_port: 8443 - tasks: - include: tasks/main.yml - handlers: - include: handlers/main.yml and /etc/ansible/hosts : [hosts] 10.23.108.182 10.23.108.183 10.23.108.184 10.23.108.185 when test ping, : [root@poste08-08-00 elasticsearch]# ansible hosts -m ping 10.23.108.183 | success => { "changed": false, "ping": "pong" } 10.23.108.182 | success => { "changed": false, "ping": "pong" } 10.23.108.185 | success => { "changed": false, "ping": "pong" } 10.23.108.184 | success => { "changed": false, "ping": "pong" } please, me :) regards, you have syntax error in playbook.
Read more

customize file_field button ruby on rails -

-
i'm trying rid of ugly button rails has default file upload. want add glyphicon <%= f.file_field :image_url, class:"glyphicon glyphicon-camera" %> this didn't work , have tried other things in different post saw on page, don't attach file. as suggested here bootstrap filestyle , can use bootstrap's filestyle style file upload buttons. step-1: add layout application.html.erb i have added bootstrap filestyle library cdn. should make sure have both jquery , boostrap loaded. <script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.filestyle/1.1.0/js/bootstrap-filestyle.min.js"> </script> step-2: add corresponding js file: $(":file").filestyle({input: false}); step-3: image_url file field follows: <%= f.file_field :image_url,class: "filestyle", "data-input" => false %>
Read more

SoapUI on windows 10 - high DPI/4K scaling issue -

-
Image
soapui doesn't seem dpi-aware , displays small on high dpi screen (tiny text , buttons). other applications running fine (screen resolution 3840 x 2160). version : soapui 5.1.2 os : windows 10 i have tried: configure soapui run "disable display scaling on high dpi settings" - parts of soapui looking bigger , don't display (image) changing resolution changing font size (preferences > editor settings > select font...) therefore assume, soapui pretends dpi-aware, not scale itself. have same issue? this workaround until developers round making version dpi-aware. step 1: add registry key hkey_local_machine\software\microsoft\windows\currentversion\sidebyside\preferexternalmanifest (dword) 1 step 2: add manifest file 'soapui-5.2.1.exe.manifest' in same directory 'soapui-5.2.1.exe' content of manifest file: <?xml version="1.0" encoding="utf-8" standalone="yes"?> <assembly xml
Read more