AMcoder - javascript, python, java, html, php, sql

SVG պատկերը և տեքստը հավասարեցվում են

Ես կցանկանայի ստեղծել ցանց՝ կենտրոնական svg պատկերակով, նկարագրական տեքստով կոճակի դիրքում, այսպես.

բայց, ցավոք, ես չեմ կարող ամեն ինչ ճիշտ դասավորել

Իմ կոդը.

.colonna {
  flex: 50%;
  padding: 10px
}

.icona {
  width: 100%
}

.centro-div {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
}

.icon-64 {
  width: 64px;
  height: 64px;
}
<div class="riga">
  <div class="colonna centro-div">
    <div class="icona"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/icon/booking/hotel-booking.svg" alt="Prenota Hotel" class="icon-64"></div>Cerca Hotel</div>
  <div class="colonna centro-div"> <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/icon/booking/volo-booking.svg" alt="Prenota Volo" class="icon-64"><br> Cerca Volo</div>
</div>

ինչպես կարող եմ դա ուղղել:

svg html css
13.12.2018

  • Փորձեք ձեր պատկերների վրա սահմանել display: block-ը (ձեր դեպքում՝ .icon-64) և տեսեք՝ արդյոք դա ուղղում է: 13.12.2018
  • Հատվածն իրականում անօգուտ է ձեր php ներարկումների պատճառով :( 13.12.2018
  • Կարո՞ղ եք ձեր նախագծում օգտագործել միայն անգլերենը: Ես ստիպված էի պահպանել կոդ այլ ծրագրավորողների կողմից, որոնք անուններ և դասեր էին գրում այնտեղ մայրենի լեզվով: 13.12.2018

Պատասխանները:


1

Փորձեք այս օրինակով,

ես թարմացրել եմ որոշ ոճ ձեր css-ում:

.colonna {
  flex: 50%;
  padding: 10px;
  
}

.icona {
  width: 100%;
  border:2px solid #ddd;
  padding:20px;
  width:200px;
  text-align:center;
}
.icona img{display:block;}
.centro-div {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
}

.icon-64 {
  width: 64px;
  height: 64px;
  margin:0 auto;
}
<div class="riga">
  <div class="colonna centro-div">
    <div class="icona">
      <img src="https://banner2.kisspng.com/20171220/oqq/rainbow-png-image-5a3ad6797f9c30.14712925151380543352278356.jpg" alt="Prenota Hotel" class="icon-64"/>
      <span>Cerca Hotel</span>
    </div>
    </div>
    </
   
</div>

Հուսով եմ, որ սա օգտակար կլինի ձեզ համար:

13.12.2018

2

Դուք պետք է օգտագործեք display:flexնաև տողի վրա և մի փոքր կարգավորեք ձեր html կառուցվածքը.

.riga {display: flex}
.colonna {
  flex: 50%;
  padding: 10px
}

.icona {
  width: 100%
}

.centro-div {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  /*justify-content: center;*/
}

.icon-64 {
  width: 64px;
  height: 64px;
  vertical-align:middle
}
<div class="riga">
  <div class="colonna centro-div">
    
      <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/icon/booking/hotel-booking.svg" alt="Prenota Hotel" class="icon-64">
      <p>Cerca Hotel</p>

  </div>
  <div class="colonna centro-div">
      <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/icon/booking/volo-booking.svg" alt="Prenota Volo" class="icon-64">
      <p>Cerca Volo</p>
  </div>
</div>

13.12.2018

3

Պատկեր տեքստի կենտրոնով

Եթե ​​ցանկանում եք, որ տեքստը լինի կենտրոնում, մենք կարող ենք երկու պարզ բան անել այն կենտրոնացնելու համար

Եթե ​​տեքստն ավելի մեծ է, ապա պատկերը.

  • Մենք պատկերը կենտրոնացնում ենք իր տարայի ներսում margin: 0 auto;-ով և display:block;-ով
    տես Մարգին 0 ավտոմատ

Եթե ​​տեքստը փոքր է, ապա պատկերը

  • Մենք պարզապես կարող ենք սահմանել text-align: center;:

Մենք չենք կարող օգտագործել միայն տեքստի հավասարեցման կենտրոնը, եթե տեքստն ավելի մեծ է: Դա պայմանավորված է նրանով, որ դրա բեռնարկղը կաճի տեքստի հետ, բայց պատկերը պարզապես հավասարեցված կմնա:

/*Divs are by default block displayed. We don't want them to take all width*/
.image-block {
  display: inline-block;
  padding: 10px;
}

/*text larger then container*/
.image-block img {
  display: block;
  margin: 0 auto;
}
/*Container smaller then text*/
.image-block .text {
  text-align: center;
}
<div>
  <div class="image-block">
    <img src="https://picsum.photos/100" />
    <div class="text">Image text below image</div>
  </div>
   <div class="image-block">
    <img src="https://picsum.photos/100" />
    <div class="text">desc</div>
  </div>
</div>

13.12.2018
Նոր նյութեր
Օգտագործելով Fetch Vs Axios.Js-ը՝ HTTP հարցումներ կատարելու համար
JavaScript-ը կարող է ցանցային հարցումներ ուղարկել սերվեր և բեռնել նոր տեղեկատվություն, երբ դա անհրաժեշտ լինի: Օրինակ, մենք կարող ենք օգտագործել ցանցային հարցումը պատվեր ներկայացնելու,..
Տիրապետել հանգստության արվեստին. մշակողի ուղեցույց՝ ճնշման տակ ծաղկելու համար
Տիրապետել հանգստության արվեստին. մշակողի ուղեցույց՝ ճնշման տակ ծաղկելու համար Ինչպե՞ս հանգստացնել ձեր միտքը և աշխատեցնել ձեր պրոցեսորը: Ինչպես մնալ հանգիստ և զարգանալ ճնշման տակ...
Մեքենայի ուսուցում բանկային և ֆինանսների ոլորտում
Բարդ, խելացի անվտանգության համակարգերը և հաճախորդների սպասարկման պարզեցված ծառայությունները բիզնեսի հաջողության բանալին են: Ֆինանսական հաստատությունները, մասնավորապես, պետք է առաջ մնան կորի..
Ես AI-ին հարցրի կյանքի իմաստը, այն ինչ ասում էր, ցնցող էր:
Այն պահից ի վեր, երբ ես իմացա Արհեստական ​​ինտելեկտի մասին, ես հիացած էի այն բանով, թե ինչպես է այն կարողանում հասկանալ մարդկային նորմալ տեքստը, և այն կարող է առաջացնել իր սեփական արձագանքը դրա..
Ինչպես սովորել կոդավորումը Python-ում վագրի պես:
Սովորելու համար ծրագրավորման նոր լեզու ընտրելը բարդ է: Անկախ նրանից, թե դուք սկսնակ եք, թե առաջադեմ, դա օգնում է իմանալ, թե ինչ թեմաներ պետք է սովորել: Ծրագրավորման լեզվի հիմունքները, դրա..
C++-ի օրական բիթ(ե) | Ամենաերկար պալինդրոմային ենթաշարը
C++ #198-ի ամենօրյա բիթ(ե), Ընդհանուր հարցազրույցի խնդիր. Ամենաերկար պալինդրոմային ենթատող: Այսօր մենք կանդրադառնանք հարցազրույցի ընդհանուր խնդրին. Ամենաերկար palindromic substring...
Kydavra ICAReducer՝ ձեր տվյալների ծավալայինությունը նվազեցնելու համար
Ի՞նչ է ICAReducer-ը: ICAReducer-ն աշխատում է հետևյալ կերպ. այն նվազեցնում է նրանց միջև բարձր փոխկապակցված հատկանիշները մինչև մեկ սյունակ: Բավականին նման է PCAreducer-ին, չնայած այն..